Question

我们正在尝试创建一个单页pdf，其中包含一个大于纸张长度的大型html元素，并且Chrome崩溃了。我们尝试更改div的长度，然后添加html一堆时间，这样它就不必立即处理整个div，但是即使它在屏幕和最终的pdf结果中不可见，该函数仍会处理整个div。有没有办法告诉函数只处理可见的dom元素，这样就不必一次努力工作？这是在代码的pdf部分添加html。我们建立了一个高度为2000px的高度 - 所以对于每个div我们计算：DivTotalheight / 2000 = numOfImages。 DivHeight = 2000px;

// the split image function
splitImage = function((doc, currImage,numOFImages,sumToNow , pageHeight, pageWidth,DivHeight){

    // check that this is not the last image
    if(currImage < numOfImages){
        // if this is the first crop , change the div's height to a relatively small height so the function could //process it quickly and doesn't crash
        if(currImage == 0)
        {
        MyDiv.height = MyDiv.height / numOfImages + 'px';
        }
        // pull the content of the div up (picture the content as a long toilet paper and we can only add a single piece at a time so each time we have to pull it up so we can see the next piece)
        MyDiv.marginTop = (currImage==0) ? 0 : -(sumToNom + DivHeight * currImage) + 'px';

        // add the current piece to the pdf and recursively continue to add the rest of the pieces
        doc.addHTML(MyDiv,0,pageHeight*currentImage/numOfImages, {formaty:'PNG',dim:{w:pageWidth,h:pageHeight/numOfImages}},function(){splitImage(doc, ++currImage,numOFImages,sumToNow + scrollHeight, pageHeight, pageWidth,DivHeight)})
    }
    // this is the last page and we need to save the pdf
    else{
        doc.save('doc.pdf');
    }
}

此代码有效，结果是单页pdf，其中包含许多图像，尽管它只显示为一个长图像。但它仍然需要永久或崩溃，即使我们处理一个div，它的总高度是2000px它只需要几秒钟......经过几个小时的调试我们认为它可能与renderQueue有关并且它甚至添加了所有元素如果不可见但我们无法弄清楚如何使它只处理可见元素。问题也可能在于html2canvas ..

jsPDF - addHTML函数崩溃了chrome

0 个答案: