jspdf - HTML2Canvas 创建多个 div

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 和 Promise 数组，实际代码如下所示:

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