jspdf将html转换为具有多个页面的pdf答案

【问题标题】：jspdf convert html to pdf with multiple pagesjspdf将html转换为具有多个页面的pdf
【发布时间】：2019-02-05 23:19:26
【问题描述】：

我正在使用 jsPdf 和 html2pdf 将 html 转换为 pdf 文件。

我可以很好地转换 html 并下载文件，但如果 html 太大而无法放入单个页面，它不会创建其他页面，我该怎么做？

代码是：

 var pdf = new jsPDF('l', 'pt', 'a4');
 pdf.canvas.height = 72 * 11;
 pdf.canvas.width = 72 * 8.5;
 html2pdf(document.getElementById(id), pdf, function(pdf){
     pdf.save('file.pdf');
 });

【问题讨论】：

标签： javascript jspdf html2pdf

【解决方案1】：

另一种解决方案。

var pdf = new jsPDF('p', 'pt', 'a4');
var options = {
     pagesplit: true
};

pdf.addHTML($(".pdf-wrapper"), options, function()
{
pdf.save("test.pdf");
});

来源：jsPDF multi page PDF with HTML renderrer

另一个答案：jsPDF multi page PDF with HTML renderrer

【讨论】：

【解决方案2】：

如果上面的答案不起作用，我已经这样做了：

按顺序下载并包含：

jQuery
html2canvas
jspdf

谷歌他们很容易找到。然后将您的可打印代码放在 div 包装报告中。并使用打印按钮调用该函数。例如（在 jsfiddle 中代码将不起作用，因为它不允许来自非 CDN 站点的外部代码，但它可以在服务器上运行）

$(document).ready(function() {
   var form = $('#report');
   var cache_width = form.width();
   var a4 = [595.28, 841.89];


   $('#create_pdf').on('click', function() {
     $('body').scrollTop(0);
     createPDF();
   });

   //create pdf
   function createPDF() {
     getCanvas().then(function(canvas) {
       var imgWidth = 200;
       var pageHeight = 290;
       var imgHeight = canvas.height * imgWidth / canvas.width;
       var heightLeft = imgHeight;
       var doc = new jsPDF('p', 'mm');
       var position = 0;

       var img = canvas.toDataURL("image/jpeg");




 doc.addImage(img, 'JPEG', 0, position, imgWidth, imgHeight);
   heightLeft -= pageHeight;



   while (heightLeft >= 0) {
     position = heightLeft - imgHeight;
     doc.addPage();
     doc.addImage(img, 'JPEG', 0, position, imgWidth, imgHeight);
     heightLeft -= pageHeight;
   }


   doc.save('Report.pdf');
   form.width(cache_width);
  });
 }


 // create canvas object
   function getCanvas() {
     form.width((a4[0] * 1.33333) - 80).css('max-width', 'none');
     return html2canvas(form, {
       imageTimeout: 2000,
       removeContainer: false
     });
   }

});

https://jsfiddle.net/vnfts73o/1

【讨论】：