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，这已经产生了巨大的差异。处理过程中内存仍然很高，但确实提高了速度和性能。

js pdf浏览器崩溃了chrome，firefox

1 个答案: