HTML2Canvas 创建多个 div答案

【问题标题】：HTML2Canvas creating multiple divsHTML2Canvas 创建多个 div
【发布时间】：2020-07-14 02:42:29
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

标签： jspdf html2canvas

【解决方案1】：

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

通过使用 JQuery 和承诺数组来实现此目的的一种方法，实际代码如下所示：

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

【讨论】：

谢谢，但请原谅我缺乏经验。我是一个非常新的编码器。所以，我正在抓取表单元素并将它们添加到 div 中。那么我怎么知道 numberOfInnerDivs 呢？
这是语言教师的教学工具我有以下元素：<div id="Present-Insert"></div> <div id="Past-Insert"></div> 等...已经在代码中，我根据它们的语法元素将 div 添加到这些元素中'相关联。我如何计算插入了多少个以便将其传递给函数？
要计算要迭代的 div 数，可以使用 JQuery .length 属性 var numberOfInnerDivs = $('.divEl').length;
或者计算你可以使用的其他 div 中有多少个 div：你可以使用 jQuery.children 属性。 var numberOfInnerDivs = $('.Present-Insert').children('div').length;

【解决方案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();
            }
        });
    }
});

【讨论】：

第 5 行的“隐藏”代表什么？

【解决方案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();
        }
    }
});
}

【讨论】：

【解决方案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();
    }
            

        }
    });
    

}

}

【讨论】：