Question

我目前正在尝试制作许多Html表的Canvas，以便将它们存储在PDF文件中。

我正在做一个ForEach循环来制作画布，当它即将完成时我保存并下载pdf文档。

问题在于，当我下载pdf时，它会向我显示每个页面中的第一张图像。

例如，如果我的文档中有5个表格，则pdf会显示5个页面，但每个页面显示创建的第一个画布，但它不会添加新的画布。

让我告诉你我的代码。

<script type="text/javascript">
//This is the array i use to store base64 of each element
var PdfImages = [{'base':null}];
PdfImages.splice(0,1);

function ToPDF(){
    $("#someContainer").css("background","#fff");
 //AgregarTabla is another object array i have to store the id's of every
 //table i previously created in html

    $.each(AgregarTabla,function(i){
        var elem = $("#a"+AgregarTabla[i].GrupoID);

        html2canvas(elem,{
            onrendered: function(canvas){
                var data = canvas.toDataURL("img/jpeg");
                PdfImages.push({'base':data});
                doc.addImage(data,"jpeg",0,0,0,0,'Octonyan');   
                doc.addPage();

                data = null;

                if(i == AgregarTabla.length-1){
                    doc.save("test.pdf");
                }
            }
        });//Fin canvas
    });


}

</script>

如果我使用window.open（数据），它会打开一个带有新图像的新选项卡，每个选项卡都会显示我根据我的html表创建的不同画布。但是当下载PDF文档时，它总是向我显示我在每个页面中创建的第一个画布。

Example

JsPDF，Html2Canvas for循环不断添加相同的图像

0 个答案: