我已经注意到了这个更新：“addHTML()现在可以将画布分成多个页面”，可以通过这个链接找到：https://github.com/MrRio/jsPDF/releases/tag/v1.0.138。
请问它是如何工作的？在我的情况下，当我点击“保存为PDF”按钮时，它只呈现单个页面而不是多个页面（有时候无法正常工作，我猜测是因为内容太长以至于无法生成pdf）。
如果有一些示例来说明这种情况，将不胜感激。谢谢！
下面是我的代码：
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.addHTML($(".pdf-wrapper"), function () {
var string = pdf.output('datauristring');
pdf.save("test.pdf");
});
将画布分成多个页面的方法是提供一个“pagesplit”选项：
var pdf = new jsPDF('p', 'pt', 'a4');
var options = {
pagesplit: true
};
pdf.addHTML($(".pdf-wrapper"), options, function()
{
pdf.save("test.pdf");
});
如果网页上有SVG图像，pdf.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');
以上方法均未对我有所帮助，因此我在这里提供一种使用addHTML()创建单个pdf并将其拆分为多个页面，每个页面具有不同html元素的方法。我使用递归，因此不确定此方法的性能影响。但它成功地为我创建了一个由4个div元素组成的4页pdf。
var pdf = new jsPDF('landscape');
var pdfName = 'test.pdf';
var options = {};
var $divs = $('.myDivClass') //jQuery object of all the myDivClass divs
var numRecursionsNeeded = $divs.length -1; //the number of times we need to call addHtml (once per div)
var currentRecursion=0;
//Found a trick for using addHtml more than once per pdf. Call addHtml in the callback function of addHtml recursively.
function recursiveAddHtmlAndSave(currentRecursion, totalRecursions){
//Once we have done all the divs save the pdf
if(currentRecursion==totalRecursions){
pdf.save(pdfName);
}else{
currentRecursion++;
pdf.addPage();
//$('.myDivClass')[currentRecursion] selects one of the divs out of the jquery collection as a html element
//addHtml requires an html element. Not a string like fromHtml.
pdf.addHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){
console.log(currentRecursion);
recursiveAddHtmlAndSave(currentRecursion, totalRecursions)
});
}
}
pdf.addHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){
recursiveAddHtmlAndSave(currentRecursion, numRecursionsNeeded);
});
}
pagesplit: true将始终拉伸pdf输出。尝试使用旧版本的jsPDF和html2canvas，可以解决此问题。addHTML而不是fromHTML，因为后者会丢失CSS规则。<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script>
$(window).on('load', function(){
var pdf = new jsPDF('p', 'pt', 'a4');
var pdfName = 'sample.pdf';
var options = {
format: 'JPEG',
// pagesplit: true,
"background": '#000',
};
var fullPage = $('#Printout_21571')[0],
firstPartPage = $('#part-1')[0],
secondPartPage = $('#part-2')[0];
pdf.addHTML(firstPartPage, 15, 20, options, function(){ pdf.addPage() });
pdf.addHTML(secondPartPage, 15, 20, options, function(){});
setTimeout(function() {
// pdf.save(pdfName);
var blob = pdf.output("blob");
window.open(URL.createObjectURL(blob));
}, 600);
})
</script>