Question

我正在尝试使用jsPDF和HTML2Canvas创建PDF。我有多个DIV插入PDF。如果我尝试将所有DIV放入容器并渲染一次，那么它只将第一页高度放入PDF中。无法弄清楚如何渲染多个div并将它们粘贴在同一PDF中，以便逐页进行。

JAVASCRIPT

function genPDF() {         
    html2canvas(document.getElementById("container"), {

        onrendered: function (canvas) {

            var img = canvas.toDataURL();

            var doc = new jsPDF(); 
            doc.addImage(img, 'PNG');
            doc.addPage(); 

            doc.save('test.pdf');
        }
    });
}

HTML

<div id="container">
    <div class="divEl" id="div1">Hi <img  src="img1.JPG"> </div>
    <div class="divEl" id="div2">Why <img  src="img2.PNG"> </div>
</div>

<button onClick="genPDF()"> Click Me </button>

Answer 1

分别添加每张图片您需要等待所有html2canvas渲染完成并添加到pdf，然后保存最终的pdf。

通过使用JQuery和promises数组实现这一目标的一种方法是，实际代码如下所示：

function genPDF() { 
    var deferreds = [];
    var doc = new jsPDF();
    for (let i = 0; i < numberOfInnerDivs; i++) {
        var deferred = $.Deferred();
        deferreds.push(deferred.promise());
        generateCanvas(i, doc, deferred);
    }

    $.when.apply($, deferreds).then(function () { // executes after adding all images
      doc.save('test.pdf');
    });
}

function generateCanvas(i, doc, deferred){

    html2canvas(document.getElementById("div" + i), {

        onrendered: function (canvas) {

            var img = canvas.toDataURL();
            doc.addImage(img, 'PNG');
            doc.addPage(); 

            deferred.resolve();
         }
    });
}

Answer 2

对于我来说它的工作原理类似：

storage_

Answer 3

您可以尝试使用HTML中的以下javascript引用进行尝试。 Html2Canvas和jsPDF对您使用的版本相当挑剔。

https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js” https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js”

var forPDF = document.querySelectorAll(".js-panel-pdf");
var len = forPDF.length;
var thisPDF = new jsPDF('p', 'mm', [240, 210]); //210mm wide and 297mm high

for (var i = 0; i < forPDF.length; i++) {
html2canvas(forPDF[i], {
    onrendered: function(canvas) {
        thisPDF.addImage(canvas.toDataURL("images/png", 1), 'PNG', 0, 0, 210, 295);
        if (parseInt(i + 1) === len) {
            thisPDF.save('sample-file.pdf');
        } else {
            thisPDF.addPage();
        }
    }
});
}

Answer 4

Stuart Smith-这不起作用，不允许下载pdf

这是Java脚本代码

function generatePDF(){
        var imgData;
        var forPDF = document.querySelectorAll(".summary");
        var len `enter code here`= forPDF.length;
        var doc =new jsPDF('p','pt','a4');
        for (var i = 0; i < forPDF.length; i++){
            html2canvas(forPDF[i],{
            useCORS:true,
            onrendered:function(canvas){
            imgData =  canvas.toDataURL('image/jpg',1.0);
            var doc =new jsPDF('p','pt','a4');
            doc.addImage(imgData,'jpg',10,10,500,480);
            if (parseInt(i + 1) === len) {
        doc.save('sample-file.pdf');
    } else {
        doc.addPage();
    }
            

        }
    });
    

}

}

HTML2Canvas创建多个div

4 个答案: