如何使用帶有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頁面

回答

相關問題