有什么方法可以结合使用 JSPDF 和 html2canvas 来加速移动浏览器上的 PDF 下载？

Question

我正在使用 html2canvas 和 jspdf 的组合从 DOM 文件创建 PDF，以将 DOM 的一部分转换为图像，然后将其添加到已创建相应的 PDF 文件。

这在桌面浏览器上运行良好，但在移动浏览器上速度极慢。

您可以通过转到下面提到的 link 然后选择任何模板，然后单击下载选项来在移动浏览器上测试该问题。

https://countenance-proto.herokuapp.com/resumevariation

这是相应的 canvas 到 pdf 转换的功能代码。

 printTemplate = () => {
        const input = document.getElementById("main-document");

        html2canvas(input, {
            scale: 2
        })
            .then((canvas) => {
                const imgData = canvas.toDataURL('image/png');
                const pdf = new jsPDF("p", "mm", "a4", true);

                let width = pdf.internal.pageSize.getWidth();
                let height = pdf.internal.pageSize.getHeight();

                pdf.addImage(imgData, 'PNG', 0, 0, width, height, '', 'FAST');
                pdf.save("countenance-resume.pdf");
            });

    }

我希望它与在桌面上下载 pdf 所需的时间相当，甚至更少。

Answer 1

尝试使用

const imgData = canvas.toDataURL('image/jpeg', 1.0);
pdf.addImage(imgData, 'JPEG', 0, 0, width, height, '', 'FAST');

而不是

const imgData = canvas.toDataURL('image/png');
pdf.addImage(imgData, 'PNG', 0, 0, width, height, '', 'FAST');

据我所知，jsPDF无论如何都会将PNG图像转换为JPEG，因此转换需要更长的时间，如果直接使用JPEG可以避免这种情况。

有什么方法可以结合使用 JSPDF 和 html2canvas 来加速移动浏览器上的 PDF 下载？

Is there any way to speed up PDF download on mobile browsers using a combination of JSPDF and html2canvas?

javascript

html2canvas

jspdf

reactjs