如何使用带有HTML2Canvas的jsPDF制作多个pdf页面

我有一个脚本，它使用HTML2Canvas在页面中截取div，然后使用jsPDF将其转换为pdf。如何使用带有HTML2Canvas的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'); 
     }); 
});

任何想法我怎么能修改为允许多个页面？

来源

2014-11-20 Tom Nolan

这个http://freakyjolly.com/create-multipage-html-pdf-jspdf-html2canvas/ – 2017-03-16 12:24:54

可以使用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中的一个问题，我仍然无法在互联网上找到如何解决这个问题。

来源

2015-09-23 09:56:06

有一个[问题]（https://github.com/类似教程MrRio/jsPDF/issues/339）在jsPDF的Github上讨论了拉伸问题和模糊问题。他们确实提供了一些解决方法。 – L84 2016-01-02 01:17:33

它伸展HTML虽然？ – Dynamic 2017-03-21 11:29:43

使用最新的jsPDF，对于我来说使用pagesplit选项= true可以正常工作。 – 2017-04-27 03:45:47

pdf.addHtml亘古不变的工作，如果有在网页上，SVG图像.. 我在这里复制的解决方案：//假设您的图片已经在画布VAR imgData = canvas.toDataURL（“图像/ PNG'）;/*以下是我发现的数字（纸张宽度和高度）。它仍然会在页面之间创建一个小的重叠部分，但对我来说足够好。如果您可以从jsPDF中找到官方号码，请使用它们。 */

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');`

来源

2016-08-05 12:09:12

如何使用带有HTML2Canvas的jsPDF制作多个pdf页面

回答

相关问题