JsPDF canvas to pdf加速生成速度答案

【问题标题】：JsPDF canvas to pdf speed the generate speedJsPDF canvas to pdf加速生成速度
【发布时间】：2021-10-15 17:37:48
【问题描述】：

我正在使用 jspdf 和 canvas 将我页面中的特定 div 下载为 pdf 但它需要 2 或 3 秒，我的客户希望它能够快速下载，有什么方法可以加快这个过程，或者减小文件大小，因为它是 8MB 但是？

代码

$('#print').click(function (e) { 
e.preventDefault();
let HTML_Width = $(".report").width();
let HTML_Height = $(".report").height();
let top_left_margin = 1;
let PDF_Width = HTML_Width + (top_left_margin * 2);
let PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
let canvas_image_width = HTML_Width;
let canvas_image_height = HTML_Height;
let totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;
html2canvas($(".report")[0]).then(function (canvas) {
    let imgData = canvas.toDataURL("image/png", 1.0);
    let pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
    pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height);
    for (let i = 1; i <= totalPDFPages; i++) {
        pdf.addPage(PDF_Width, PDF_Height);
        pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height * i) + (top_left_margin * 4), canvas_image_width, canvas_image_height);
    }
    pdf.save("Report.pdf");
    $(".html-content").hide();
});

});

【问题讨论】：

标签： javascript pdf canvas

【解决方案1】：

有 2 个组件构成了大部分性能。数据量和压缩率。

对于屏幕阅读文档选择较低的 DPI - 72 可以减少数量是合理的，但如果意图是打印，则可能不是很好。

对于 html2cavas，我们最终使用 3.125 的比例来降低像素密度。（它是选项参数的一部分）。我不记得细节了，这可能会导致大约 96dpi。

对于压缩，您可以尝试使用选项，我们最终在 pdf.addImage 上使用了“FAST”压缩。

【讨论】：