chrome、firefox的js pdf浏览器崩溃

Question

我们正在使用 jsPDF 将 HTML 生成为 PDF。但是，在向我的 PDF 添加 40 个元素并将其渲染到画布时，我的浏览器崩溃了。

我们正在使用以下函数将元素作为图像添加到 pdf。

function addElement(element, doc, opt, newPage, callback) {
        var thiscreen = element;
        //Get the original background color.
        var originalBGColor = thiscreen.style.backgroundColor;
        //Change the background color of the element to desired color.
        if (opt.bgColor)
            thiscreen.style.backgroundColor = opt.bgColor;
        var options = options || {};
        options.elements = [thiscreen];
        //Increment the in-progress counter.
        counter++;
        console.log('adding' + counter);
        console.log(element);
        //The complete callback method.
        options.complete = setTimeout(function(images) {
            //Decrement the in-progress counter since the image is successfully generated..
            counter--;
            console.log('complete' + counter);
            console.log(element);
            var queue = html2canvas.Parse(thiscreen, images, options),
                canvas = html2canvas.Renderer(queue, options);
            //Reset the background color.
            thiscreen.style.backgroundColor = originalBGColor;
            //Add the generated image to PDF document.
            doc.addImage(canvas.toDataURL(), 'png', opt.x, opt.y, opt.width, opt.height);
            //Call the callback method if any
            if (callback) {
                callback();
            }
        }, 500);
        //Conver the html to PNG using html2canvas util.
        html2canvas.Preload(thiscreen, options);
    }

我们也尝试过使用以下解决方案。

var blob = doc.output("blob");
window.open(URL.createObjectURL(blob));

或者有什么方法可以将低分辨率图像添加到 pdf 中。

Answer 1

如果您有很多图像，请尝试使用 addImage 的压缩参数。

https://github.com/MrRio/jsPDF/blob/master/src/modules/addimage.js#L720

您可能需要测试每个压缩选项以查看哪个可以处理您需要的内容：“FAST”、“SLOW”、“MEDIUM”、“NONE”。

在我对包含大量图像的 PDF 进行的测试期间，这产生了巨大的差异。在处理过程中内存仍然很高，但它确实提高了速度和性能。