Javascript JSPDF - addHTML() 多画布页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25904440/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JSPDF - addHTML() Multiple Canvas Page
提问by Dion Alexander
I noticed already have a release "addHTML() can now split the canvas into multiple pages" which can find through this link : https://github.com/MrRio/jsPDF/releases/tag/v1.0.138.
我注意到已经有一个版本“addHTML() 现在可以将画布分成多个页面”，可以通过此链接找到：https: //github.com/MrRio/jsPDF/releases/tag/v1.0.138。
May i know how it work? In my case, i just tried it out when click on "save as pdf" button, it just render a single page instead of multiple pages (sometimes didn't worked, i assume because the content is too long to be generated as pdf).
我可以知道它是如何工作的吗？就我而言，我只是在单击“另存为 pdf”按钮时尝试了它，它只是呈现单个页面而不是多个页面（有时不起作用，我认为是因为内容太长而无法生成为 pdf） .
Would appreciate if there are some examples for this case. Thanks!
如果有这种情况的一些例子，将不胜感激。谢谢！
Attached my codes below:
下面附上我的代码：
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.addHTML($(".pdf-wrapper"), function () {
var string = pdf.output('datauristring');
pdf.save("test.pdf");
});
回答by diegocr
Splitting canvas into multiple pages work by providing a "pagesplit" option:
通过提供“pagesplit”选项将画布拆分为多个页面：
var pdf = new jsPDF('p', 'pt', 'a4');
var options = {
pagesplit: true
};
pdf.addHTML($(".pdf-wrapper"), options, function()
{
pdf.save("test.pdf");
});
回答by Trilok Nagvenkar
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. */
如果网页上有 svg 图像，则 pdf.addHtml 不起作用。/* 这是我发现有效的数字（纸张宽度和高度）。它仍然在页面之间创建了一些重叠部分，但对我来说已经足够了。如果您可以从 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');
回答by Paddy
None of the above helped me so I'll put this here for anyone who arrives at this page looking to use addHTML() to create a single pdf split into multiple pages with a different html element on each page. I used recursion so I'm not sure of the performance implications of this approach. It worked for me to create a 4 page pdf from 4 div elements.
以上都没有帮助我，所以我将把它放在这里，供到达此页面的任何人使用 addHTML() 创建一个单独的 pdf，该 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);
});
}
回答by Abhijeet K.
With using pagesplit: trueit always stretches the pdf output.
Try to use an old version of jsPDF with html2canvas of course.
使用pagesplit: true它总是会拉伸 pdf 输出。当然，尝试使用带有 html2canvas 的旧版本 jsPDF。
Sharing the result of my 2 days trial to achieve the multipage PDF generation with addHTMLnot fromHTMLsince it looses the CSS rules.
分享我的2天的试用的结果，实现多页PDF生成与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>
then the PDF should be just fine as follows:
那么PDF应该没问题，如下所示：
<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>
Hope this would help. Thanks!
希望这会有所帮助。谢谢！
