将DOM转换为JavaScript中的本机HTML
[英]Convert DOM to native HTML in javascript
问题描述
I need to send some HTML to a service that converts HTML to PDF. 
我需要发送一些HTML到将HTML转换为PDF的服务。 the service accepts a payload that is form-data (a file). 该服务接受的有效载荷是表单数据（文件）。
how can I take some of the HTML from the DOM, and convert it into a file, which I can use in my payload ? 我如何从DOM中获取一些HTML，并将其转换为文件，以便在有效负载中使用？
<p>some other HTML</p>
<div id="content">
some content
</div>
const html = document.getElementById('content').innerHTML;
const builder = new Blob([html], {type: 'text/html'});
I get this error The format of the request must be of multipart/form-data type. 我收到此错误消息。请求的格式必须为multipart / form-data类型。
2 个解决方案
解决方案1
0 2019-08-29 11:10:58
You will have to change css style on your own. 您将不得不自行更改css样式。
function downloadPDF(){ var printContents = document.getElementById('content').innerHTML; var originalContents = document.body.innerHTML; document.body.innerHTML = printContents; window.print(); document.body.innerHTML = originalContents; } function redirect() { window.location.href = "/user-landing-page"; }
<html class="gr__cuetmwa_org"><head><title>Membership Form|Engr. Anik Islam | 400400505 </title> <style> @media print { #freespace {page-break-after: always;} } body { margin: 0; padding: 0; background-color: #FAFAFA; font: 11pt "Tahoma"; } * { box-sizing: border-box; -moz-box-sizing: border-box; } .page { width: 21cm; min-height: 29.7cm; padding: .2cm; margin: .001cm auto; border: 1px #D3D3D3 solid; background: transparent; /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);*/ } .uploaded-image{ display:block; height: 37mm; width: 37mm; float: right; } .uploaded-image-sign{ display:block; height: 57px; width: 263px; float: right; } .no-padding{ padding: 0; } .px-padding{ padding: 5px; } .border { border: 1px solid #0000ff; } .border-right{ border-right: 1px solid #0000ff ; } .border-bottom{ border-bottom: 1px solid #0000ff } .border-top { border-top: 1px solid #0000ff } .border-top{ border-top: 1px solid #0000ff; } .thumbnail{ border: 1px solid black; } .header-logo{ width: 492px; } .intermidiate-gap{ border-right: 1px solid #0000ff; } .cell-info{ padding: 5px; } .text-right{ text-align: right; } .text-left{ text-align: left; } .text-center{ text-align: center; } .title{ background: #a0a0a0; } .float-right{ float: right; } .float-left{ float: left; } </style> <link rel="stylesheet" type="text/css" href="http://www.cuetmwa.org/extraassets/libraries/bootstrap/bootstrap.min.css"> <script rel="text/javascript" src="http://www.cuetmwa.org/js/jquery.min.js"></script> <script type="text/javascript" src="http://www.cuetmwa.org/bootstrap/js/bootstrap.min.js"></script> </head> <body data-gr-cs-loaded="true"> <div class="row"> <div class="col-sm-12 text-center" style="text-align:center;padding: 10px 0 10px 0"><a href="javascript:void(0)" onclick="downloadPDF();" class="btn btn-primary"><i class="fa fa-money"></i> Click To Download </a></div> <div class="col-sm-12 text-center" style="text-align:center;padding: 10px 0 10px 0"><a href="javascript:void(0)" onclick="redirect()" class="btn btn-primary"><i class="fa fa-money"></i> Back To Main Page </a></div> </div> <div class="page" id="content"> <table width="100%" style="text-align: center"> <tbody><tr class="no-padding"> <td><img class="header-logo" src="../../../images/form_logo.jpg"></td> <td><div class="image-holder"> <img class="uploaded-image thumbnail" src="members/images/1536502878.jpg"> </div></td> </tr> </tbody></table> <table id="data-table" class="border" width="100%"> <tbody><tr width="100%"> <td width="50%"><table width="100%"> <tbody><tr><td class="px-padding border-right text-left border-bottom">Genre of Member:</td><td class="px-padding text-right border-bottom">Engineer</td></tr> <tr><td class="px-padding border-right text-left border-bottom">Membership Type:</td><td class="px-padding text-right border-bottom">Lifetime</td></tr> <tr><td class="px-padding border-right text-left">Member No:</td><td class="px-padding text-right"> 400400505 </td></tr> </tbody></table> </td> <td class="intermidiate-gap"></td> <td width="50%"> <table width="100%"> <tbody><tr><td class="px-padding border-right text-left border-bottom">Name:</td><td class="px-padding text-right border-bottom">Engr. Anik Islam</td></tr> <tr><td class="px-padding border-right text-left border-bottom">Email:</td><td class="px-padding text-right border-bottom">anik587@gmail.com</td></tr> <tr><td class="px-padding border-right text-left ">Mobile:</td><td class="px-padding text-right">01717782151</td></tr> </tbody></table> </td> </tr> <tr> <td colspan="3" class="title border-bottom border-top px-padding">Personal Information</td> </tr> <tr> <td colspan="3"> <table width="100%"> <tbody><tr> <td class="cell-info text-left border-right border-bottom">Blood Group:</td> <td class="cell-info text-right border-bottom">A+</td> <td class="intermidiate-gap"></td> <td class="cell-info text-left border-right border-bottom">Birthday:</td> <td class="cell-info text-right border-bottom">1992-11-13</td> </tr> <tr> <td class="cell-info text-left border-right border-bottom">Father's Name:</td> <td class="cell-info text-right border-bottom">Hamidullah Feroz (Alive) </td> <td class="intermidiate-gap"></td> <td class="cell-info text-left border-right border-bottom">Mother's Name</td> <td class="cell-info text-right border-bottom">Shanaz Parvin (Alive) </td> </tr> <tr> <td class="cell-info text-left border-right">Spouse's Name</td> <td class="cell-info text-right"> Fabiha Afrida </td> <td class="intermidiate-gap"></td> <td class="cell-info text-left border-right">Childerns:</td> <td class="cell-info text-right"> <table> <tbody><tr><td class="border-bottom"> 1) N/A </td></tr> <tr><td> 2) N/A </td></tr> </tbody></table> </td> </tr> </tbody></table> </td> </tr> <tr> <td colspan="3" class="title border-bottom border-top px-padding">Eduational/Professional Information</td> </tr> <tr> <td colspan="3"> <table width="100%"> <tbody><tr> <td class="cell-info text-left border-right border-bottom">Student ID:</td> <td class="cell-info text-right border-bottom"> 0904015 </td> <td class="intermidiate-gap"></td> <td class="cell-info text-left border-right border-bottom">Department:</td> <td class="cell-info text-right border-bottom">Computer Science & Engineering</td> </tr> <tr> <td class="cell-info text-left border-right border-bottom">Session:</td> <td class="cell-info text-right border-bottom">2009-2010 (Batch No:40)</td> <td class="intermidiate-gap"></td> <td class="cell-info text-left border-right border-bottom">Passing Year:</td> <td class="cell-info text-right border-bottom">2016</td> </tr> <tr> <td class="cell-info text-left border-right">Organisation:</td> <td class="cell-info text-right ">SSD-Tech</td> <td class="intermidiate-gap"></td> <td class="cell-info text-left border-right">Designation:</td> <td class="cell-info text-right">Engineer</td> </tr> </tbody></table> </td> </tr> <tr> <td colspan="3" class="title border-bottom border-top px-padding">Contact Information</td> </tr> <tr> <td colspan="3"> <table width="100%"> <tbody><tr> <td class="cell-info text-left border-right border-bottom">Emergency Contact Person:</td> <td class="cell-info text-right border-bottom">Hamidullah Feroz</td> <td class="intermidiate-gap"></td> <td class="cell-info text-left border-right border-bottom">Emergency Contact Person Mobile</td> <td class="cell-info text-right border-bottom">01716201641</td> </tr> <tr> <td class="cell-info text-left border-right">Present Address</td> <td class="cell-info text-right">Cha 92/b, Gupipara , Uttar Badda, Dhaka</td> <td class="intermidiate-gap"></td> <td class="cell-info text-left border-right ">Parmanent Address</td> <td class="cell-info text-right ">Cha 92/b, Gupipara , Uttar Badda, Dhaka</td> </tr> </tbody></table> </td> </tr> <tr> <td colspan="3" class="title border-bottom border-top px-padding">Declaration</td> </tr> <tr> <td colspan="3" class="border-bottom px-padding text-left">I declared that the information I have appended herewith and documents enclosed are complete and correct. If enrolled, I shall conformed to the Rules & Regulations of CUET MEDICAL WELFARE ASSOCIATION and the code of ethics.*</td> </tr> <tr> <td style="padding:25px 0 0 0px"><p class="text-center">2018-09-09 20:21:18</p><p class="text-center border-top">Date</p></td> <td colspan="2" class="px-padding text-center"><img class="text-center uploaded-image-sign thumbnail" src="members/signs/1536502878.jpg"> <p class="border-top" style="margin-top:60px">Signature</p> </td> </tr> </tbody></table> </div> <div id="freespace"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js"></script> </body><span class="gr__tooltip"><span class="gr__tooltip-content"></span><i class="gr__tooltip-logo"></i><span class="gr__triangle"></span></span></html>
解决方案2
0 已采纳 2019-08-29 13:44:44
I got it working here is the solution - NOTE This is an Angular 8 solution, but vanilla javascript is pretty close 我知道这里是解决方案-注意这是Angular 8解决方案，但是香草javascript非常接近
const formData = new FormData();
const html = this.myInput.nativeElement.innerHTML;
const htmlWithDoc = '<!DOCTYPE html><html lang="en"><head><title>Document</title></head><body>' + style + html + '</body></html>';
formData.append('blob', new Blob([htmlWithDoc], {type: 'text/html'}));
this._dataService.htmlToPdf(formData).subscribe(response => {
this.saveToFileSystem(response);
});
private saveToFileSystem(response) {
const filename = 'test'; // parts[1].split('=')[1];
const blob = new Blob([response], { type: 'application/pdf' });
saveAs(blob, filename);
}
htmlToPdf(payload) {
const location = 'my API';
return this._http.post(
location,
payload,
{responseType: 'blob'}
).pipe(res => res);
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
使用DOM将JavaScript数组转换为HTML表 - Convert javascript arrays into HTML table using DOM
将HTML DOM元素转换为JavaScript对象？ - convert HTML DOM element to JavaScript Object?
如何在Javascript中将混合的HTML字符串/ DOM元素转换为DOM元素？ - How to convert from mixed HTML-string/DOM-elements to DOM-elements in Javascript?
使用javascript DOM生成HTML - Generate Html with javascript DOM
使用javascript将HTML附加到DOM - append HTML to the DOM with javascript
html dom和javascript - html dom and javascript
HTML DOM Javascript不起作用？ - HTML DOM Javascript not working?
javascript html dom 的问题 - Problems with javascript html dom
使用 javascript 提取 DOM HTML - DOM HTML Extract with javascript
Javascript HTML 和 DOM - Javascript HTML and DOM
相关标签