在 javascript 中将 DOM 转换为原生 HTML

Question

我需要将一些 HTML 发送到将 HTML 转换为 PDF 的服务。该服务接受表单数据（文件）的有效负载。

我如何从 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'});

我收到这个错误 请求的格式必须是multipart/form-data类型。

Answer 1

您必须自行更改 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-c-s-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 &amp; 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 &amp; 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>

Answer 2

我得到它在这里工作是解决方案 - 注意这是一个 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);
  }

在 javascript 中将 DOM 转换为原生 HTML

Convert DOM to native HTML in javascript

javascript

form-data