React：使用jspdf和html2canvas将HTML元素传输到Web worker以生成Pdf

Question

我目前正在使用jspdf和html2canvas在react组件内部的html中创建一个pdf文件。它可以工作，但是当有大量数据时它可以锁定浏览器。所以，我想将此任务委托给Web工作人员在后台执行，而不是阻止浏览器。

这是我没有工人的方式：

handleExportToPdf = () => {
    const pages = Array.from(document.getElementsByClassName("client-report__container"));
    Promise.all(pages.map(p => html2canvas(p, { logging: false }))).then(canvases => {
        const pdf = new JsPDF({
            orientation: "l",
            unit: "in",
        });
        // tslint:disable-next-line:prefer-for-of
        for (let i = 0; i < canvases.length; i++) {
            if (i > 0) pdf.addPage();
            pdf.addImage(canvases[i].toDataURL("image/png"), "PNG", 0.25, 0, 11, 8);
        }
        pdf.save("report.pdf");
    });
};

这被修改为使用web worker：

handleExportToPdf = () => {
        const pages = Array.from(document.getElementsByClassName("client-report__container"));
        this.reportWorker.postMessage(pages);

    };

但是，当我尝试运行此命令时，我收到此错误：

Uncaught DOMException: Failed to execute 'postMessage' on 'Worker': HTMLDivElement object could not be cloned.

这是我工作人员的代码：

export default () => {
    self.addEventListener("message", event => {
        console.log("in worker");
        const canvases = event.data;
        const pdf = new JsPDF({
            orientation: "l",
            unit: "in",
        });
        // tslint:disable-next-line:prefer-for-of
        for (let i = 0; i < canvases.length; i++) {
            if (i > 0) pdf.addPage();
            pdf.addImage(canvases[i].toDataURL("image/png"), "PNG", 0.25, 0, 11, 8);
        }
        pdf.save("report.pdf");
    });
};

有没有办法将Html元素传输给Web worker？或者，更好的方法来做到这一点？我试着转移画布，但这也不起作用。得到了同样的错误（HtmlCanvasElement）。

Answer 1

事实证明，DOM元素不适用于the structured clone algorithm。但是，图像确实可以简单地传输画布图像而不是画布元素。相反，我决定解析DOM元素以提取我需要的数据并使用pdfMake创建pdf文件（由于使用html2canvas / jsPDF的模糊）。