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

【问题标题】：React: transferring HTML elements to web worker to generate Pdf using jspdf and html2canvasReact：使用 jspdf 和 html2canvas 将 HTML 元素传输到 web worker 以生成 Pdf
【发布时间】：2019-02-22 20:05:23
【问题描述】：

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

这就是我没有工人的方式：

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）。

【问题讨论】：

你好，可以试试const pages = Array.from(document.getElementsByClassName("client-report__container").cloneNode(true))吗？
@samb102 我试过了，但没用：-/
错误信息有变化还是还是HTMLDivElement object could not be cloned？
是的，还是一样的错误。

标签： reactjs web-worker jspdf html2canvas

【解决方案1】：

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

【讨论】：