Hatmal 2 Sheeting创造多日

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

对我来说，它的工作方式如下：

$('#cmd2').click(function () {

    var len = 4; //$x(".//body/div/div").length
    var pdf = new jsPDF('p', 'mm','a4');
    var position = 0;
    Hide
    for (let i = 1;i  <= len; i++){
        html2canvas(document.querySelector('#pg'+i),
            {dpi: 300, // Set to 300 DPI
            scale: 1 // Adjusts your resolution
            }).then(canvas => {
            pdf.addImage(canvas.toDataURL("images/png", 1), 'PNG', 0,position, 210, 295);

            if (i == len){
                pdf.save('sample-file.pdf');
            }else{
                pdf.addPage();
            }
        });
    }
});

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();
        }
    }
});
}