javascript - 如何使用 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 不起作用。我根据已经在 Canvas 中的图片复制解决方案。

这是我发现有效的数字(纸张宽度和高度)。它仍然在页面之间创建了一些重叠部分，但对我来说已经足够好了。如果您可以从 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');`