Question

ticket_list = [0, 1, 2];

function genPDF(){
    var deferreds = [];
    var doc = new jsPDF();

    for (let i = 0; i < ticket_list.length; i++) {
        var deferred = $.Deferred();
        deferreds.push(deferred.promise());
        genCanvas(i, doc, deferred);
    }

    $.when.apply($, deferreds).then(function () { // executes after adding all images
        doc.save('test.pdf');
    });
}

function genCanvas(i, doc, deferred){
    html2canvas(document.getElementById("div"+i), {
        onrendered: function(canvas){
            var img = canvas.toDataURL();
            doc.addImage(img, 'JPEG', 0, 10, 350, 125, 'center');
            doc.addPage();

            deferred.resolve();
        }
    });
}

$('#download').click(function(){
    genPDF();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
     <p>A</p>
</div>

<div id="div2">
     <p>B</p>
</div>

<div id="div3"> 
     <p>C</p>
</div>

运行此脚本时没有出现错误，但是pdf文件很奇怪。

它循环3次，但只有同一个div渲染3次。

我不知道该怎么办。

任何人都可以帮助我。

Answer 1

황준필，来自jdPDF addImage Doc

addImage（imageData，格式，x，y，宽度，高度，别名，压缩，旋转）

addImage的第七个参数是alias，您为其分配了'center'，其描述是

图像的别名（如果多次使用）

因此，如果给出文字字符串，则始终将相同的imageData添加到doc中，

尝试使用如下所示的变量，或忽略此参数。

html2canvas(document.getElementById('div' + i), {
    onrendered: function(canvas){
        var img = canvas.toDataURL();
        doc.addImage(img, 'JPEG', 0, 10, 350, 125, 'div' + i);
        doc.addPage();

        deferred.resolve();
    }
});

html2canvas仅呈现相同的图像

1 个答案: