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

I have a script that uses HTML2Canvas to take a screenshot of a div within the page, and then converts it to a pdf using jsPDF.

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

The problem is the pdf that is generated is only one page, and the screenshot requires more than one page in some instances. For example the screenshot is larger than 8.5x11. The width is fine, but I need it to create more than one page to fit the entire screenshot.

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

Here is my script:

这是我的脚本:

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

Any ideas how I could modify that to allow for multiple pages?

有什么想法我可以修改它以允许多页吗?

2 个解决方案

#1

you can use page split option of addhtml like this:

可以使用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`
});

Note: This will break the html on multiple pages but these pages will get stretched. Stretching is a issue in addhtml till now and i am still not able to find on internet how to solve this issue.

注意:这会在多个页面上破坏html，但是这些页面会被拉伸。拉伸是目前在addhtml中的一个问题，我仍然无法在互联网上找到解决这个问题的方法。

#2

pdf.addHtml doesnot work if there are svg images on the web page.. I copy the solution here: // suppose your picture is already in a canvas var imgData = canvas.toDataURL('image/png'); /* Here are the numbers (paper width and height) that I found to work. It still creates a little overlap part between the pages, but good enough for me. if you can find an official number from jsPDF, use them. */

pdf。如果web页面上有svg图像，则addHtml不能工作。我在这里复制解决方案://假设您的图片已经在画布var imgData = canvas. todataurl ('image/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');`

#1