如何使用jsPDF和HTML2Canvas拥有多个pdf页面

Question

我有一个脚本使用HTML2Canvas在页面中截取div，然后使用jsPDF将其转换为pdf。

问题是生成的pdf只有一页，在某些情况下屏幕截图需要多个页面。例如，屏幕截图大于8.5x11。宽度很好，但我需要它来创建多个页面以适应整个屏幕截图。

这是我的脚本：

var pdf = new jsPDF('portrait', 'pt', 'letter');
$('.export').click(function() {
      pdf.addHTML($('.profile-expand')[0], function () {
           pdf.save('bfc-schedule.pdf');
      });
 });

有什么想法我可以修改它以允许多个页面？

Answer 1

如果网页上有svg图像，则pdf.addHtml不起作用。我在这里根据画布中的图片复制解决方案。

这是我发现工作的数字（纸张宽度和高度）。它仍会在页面之间创建一个小的重叠部分，但对我来说足够好。如果你能从jsPDF找到官方号码，请使用它们。

var imgData = canvas.toDataURL('image/png');
var imgWidth = 210; 
var pageHeight = 295;  
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
var doc = new jsPDF('p', 'mm');
var position = 0;

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

while (heightLeft >= 0) {
  position = heightLeft - imgHeight;
  doc.addPage();
  doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
  heightLeft -= pageHeight;
}
doc.save( 'file.pdf');`

Answer 2

您可以使用addhtml的页面拆分选项，如下所示：

var options = {
    background: '#fff',
    pagesplit: true
};

var doc = new jsPDF(orientation, 'mm', pagelayout);
doc.addHTML(source, 0, 0, options, function () {
        doc.save(filename + ".pdf");
        HideLoader();`enter code here`
});

注意：这将打破多个页面上的html，但这些页面将被拉伸。到目前为止，拉伸是addhtml中的一个问题，我仍然无法在互联网上找到如何解决这个问题。

Answer 3

你可以尝试一下：

$('#cmd2').click(function () {

    var len = 4; //$x(".//body/div/div").length
    var pdf = new jsPDF('p', 'mm','a4');
    var position = 0;
    Hide
    for (let i = 1;i  <= len; i++){
        html2canvas(document.querySelector('#pg'+i),
            {dpi: 300, // Set to 300 DPI
            scale: 1 // Adjusts your resolution
            }).then(canvas => {
            pdf.addImage(canvas.toDataURL("images/png", 1), 'PNG', 0,position, 210, 295);

            if (i == len){
                pdf.save('sample-file.pdf');
            }else{
                pdf.addPage();
            }
        });
    }
});

Answer 4

我能够使用async功能完成它。

(async function loop() {
    var pages = [...]
    for (var i = 0; i < pages.length; i++) {
      await new Promise(function(resolve) {
        html2canvas(pages[i], {scale: 1}).then(function(canvas) {

          var img=canvas.toDataURL("image/png");
          doc.addImage(img,'JPEG', 10, 10);
          if ((i+1) == pages.length) {
            doc.save('menu.pdf');
          } else {
            doc.addPage();
          }
          resolve();
        });
      });
    }
})();