Question

我用html2canvas + jsPDF编写pdf生成器。我为此使用递归方法。当我在镀铬上启动它时，它就会让它变得很快！＆＃39;关于第25次迭代的例外。在Mozilla上，我可以超过30岁而且它不会崩溃。我不明白为什么。这是我的代码：

function pdfMe(){
        var pdf=new jsPDF('l');
        var slides=document.getElementById("diapoStock").children; //return some divs
        var firstSlide=slides[0].id;
        pdfSlide(firstSlide,firstSlide,pdf);
    }
    //PDF recursive
    function pdfSlide(id,idFirst,pdf){
        document.getElementById("pdfOutput").innerHTML="";   //empty the output
        var next=nextElementOf(id.substr(0,id.length-3)+"Div");    //next div to PDF
        showMe(id.substr(0,id.length-3));                //Show the div to PDF in 'central'
        html2canvas(document.getElementById("central",{async:true})).then(function (canvas) {
            document.getElementById("pdfOutput").appendChild(canvas);   //div to PDF shown
            var img=canvas.toDataURL("image/png");
            pdf.addImage(img, 'PNG', 0, 0, 297, 210);    //div added to PDF
            if(next===idFirst){                          //if end of divs
                endPDF(pdf);
            }
            else{
                pdf.addPage();
                pdfSlide(next,idFirst,pdf);             //to next div
            }
        });
    }
    //Print
    function endPDF(pdf){
        pdf.save('{{ propale.titre }}.pdf');
    }

我不知道这是否是由于缓存大小的差异造成的。我用console.log(window.performance.memory);打印它，但它给了我相同的10或30次迭代。

是否由于我的递归方法？它是否使用了太多内存？

希望这是可以理解的

Answer 1

我注意到的一些事情：你的第一个滑动＆＃39;每次调用pdfMe()函数时，变量总是被覆盖。这导致永远不会去if(next === idFirst)分支。这也导致浏览器尝试异步地再次访问打破浏览器的pdfSlide()。

你已经将相同的firstSlide变量两次传递给了pdfSlide()函数，但这并没有什么可以解决的。

我认为上述比较是提升绩效的关键。我只是添加了一个＆＃39; first＆＃39;标志只是为了向您展示如何保存第一个项目然后开始迭代。当你到达最后一个（我无法根据你的代码确定它）然后尝试提出一个不同的if()语句来退出递归函数。

我知道这不是复制粘贴的答案，但希望能引导您走向正确的方向。

＆＃13;

var first = true;
var firstID = "";

function pdfMe(){
    var pdf = new jsPDF('l');
    var slides = document.getElementById("diapoStock").children;
    if(first) firstID = slides[0].id; // creating this 'first' flag not to overwrite with every iteration
    first = false;
    pdfSlide(slides[0].id,firstID,pdf); // you were passing the same argument twice to the pdfSlide function. Removed one of those
};

// Added these options from the html2canvas documentation
var options = {
  async: true,
  allowTaint: false,
  imageTimeout: 0
}
function pdfSlide(id,firstID,pdf){
    document.getElementById("pdfOutput").innerHTML="";
    var next = nextElementOf(id.substr(0,id.length-3)+"div"); // this needs to be set differently
    showMe(id.substr(0,id.length-3));
    
    html2canvas(document.getElementById("central",options)).then(function(canvas){
        document.getElementById("pdfOutput").appendChild(canvas);
        var img = canvas.toDataURL("image/png");
        pdf.addImage(img, 'PNG', 0, 0, 297, 210);
        if(next.id === firstID){                          // <-- this condition never happened and because of asynchronous behaviour browser tries to load the else->recursive again and again
            endPDF(pdf);
        }
        else{
            pdf.addPage();
            pdfSlide(next,idFirst,pdf);
        }
    });
}
//Print
function endPDF(pdf){
    pdf.save('{{ propale.titre }}.pdf');
}

＆＃13;

jsPDF + html2canvas在Chrome上捕捉，而不是在Firefox上

1 个答案: