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

Question

我有一个脚本使用HTML2Canvas截取div页面内的a ,然后使用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不起作用.我在这里复制解决方案://假设你的图片已经在画布中var imgData = canvas.toDataURL('image/png');/*这是我发现工作的数字(纸张宽度和高度).它仍会在页面之间创建一个小的重叠部分,但对我来说足够好.如果你能从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中的一个问题，我仍然无法在Internet上找到如何解决此问题的方法。