[jsPDF] The jsPDF plugin converts html pages into PDFs, downloads them, and supports paging

1. Purpose: In the front section is the jQuery library or the VUE library or a hybrid library of the two, which converts html pages and data into PDF format and downloads, supports paging

2. Import the class library package:

<!-- .pdf file downloaddownload -->
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
    <script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>
<!-- jQuery 2.2.3 -->
<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>

3. The page content needs to be downloaded, assuming it is in a DIV (vue2.0 example):

<div class="right-aside" id="pdfDom" class="right-aside">
        
        <section class="content-header">
            @yield('search')
        </section>
        <section class="content">
            @yield('content')
        </section>
        <i-col span="8">
            <i-button type="warning" @click="makeMpdf()">导出PDF文件</i-button>
        </i-col>
</div>
<script type="text/javascript">
function makeMpdf () {
    if(confirm("您确认下载该PDF文件吗?")){
       var pdf = new jsPDF('p','pt' , ' a4 ' );
     // Set the larger the print scale, the smaller the print . 
       pdf.internal.scaleFactor =  2 ;
        var options = {
            pagesplit: true, //Set whether to automatically paginate
           " background " : ' #FFFFFF '    // If The exported pdf has a black background, and the background of the exported html module content needs to be set to white. 
      };
        var printHtml = $('#pdfDom').get(0 ) ;    // The content in a div on the page, get the div content by id 
       pdf.addHTML(printHtml, 15 , 15 , options,function() {
          pdf.save( ' target.pdf ' );
      });
    }
}

</script>

 

4. Or the above JS method can be replaced with this.

//Export html page to .pdf format file (for jQuery, vue library) -- xzz 2018/04/24
function makeMpdf (pdfName) {
  if(confirm("Are you sure to download this PDF file?")){
    var target = document.getElementsByClassName("right-aside")[0];
    target.style.background = "#FFFFFF";
    if (pdfName == '' || pdfName == undefined) pdfName = getNowFormatDate ();
    
    html2canvas(target, {
        unrendered:function(canvas) {
            var contentWidth = canvas.width;
            var contentHeight = canvas.height;

            //A page of pdf displays the canvas height generated by the html page;
            var pageHeight = contentWidth / 592.28 * 841.89;
            //The html page height of the pdf is not generated
            var leftHeight = contentHeight;
            //page offset
            var position = 0;
            //The size of a4 paper [595.28,841.89], the width and height of the canvas generated by the html page in the pdf
            var imgWidth = 595.28;
            var imgHeight = 592.28/contentWidth * contentHeight;

            var pageData = canvas.toDataURL('image/jpeg', 1.0);

            var pdf = new jsPDF ('', 'pt', 'a4');

            //There are two heights to distinguish, one is the actual height of the html page, and the height of the page that generates the pdf (841.89)
            //When the content does not exceed the range displayed on one page of the pdf, no paging is required
            if (leftHeight < pageHeight) {
            pdf.addImage (pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
            } else {
                while(leftHeight > 0) {
                    pdf.addImage (pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                    leftHeight -= pageHeight;
                    position -= 841.89;
                    // Avoid adding blank pages
                    if(leftHeight > 0) {
                      pdf.addPage ();
                    }
                }
            }
            pdf.save(pdfName+".pdf");
        }
      })
  }
}

5. Effect: