JSPDF - addHTML()多个画布页面

Question

我注意到已经有一个版本"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");
});

Answer 1

通过提供"pagesplit"选项将画布拆分为多个页面:

var pdf = new jsPDF('p', 'pt', 'a4');
var options = {
         pagesplit: true
    };

pdf.addHTML($(".pdf-wrapper"), options, function()
{
    pdf.save("test.pdf");
});

Answer 2

如果网页上有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');

Answer 3

以上都没有帮助我所以我会把这个放在这里,任何到达这个页面的人都希望使用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);
        });
}