Реагируйте: передача HTML-элементов веб-работнику для генерации Pdf с использованием jspdf и html2canvas - PullRequest
Новая
       35

Реагируйте: передача HTML-элементов веб-работнику для генерации Pdf с использованием jspdf и html2canvas

0 голосов
/ 22 февраля 2019

В настоящее время я создаю pdf-файл из html внутри реагирующего компонента, используя jspdf и html2canvas.Это работает, но он может заблокировать браузер, когда есть много данных.Итак, я хочу делегировать эту задачу веб-работнику, чтобы он выполнял ее в фоновом режиме, а не блокировал браузер.

Вот как я делаю это без работник: 

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");
    });
};

Это изменено для использования веб-работника: 

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-элементов веб-работнику?Или лучший способ сделать это?Я пытался просто перенести холсты, но это тоже не сработало.Получена та же ошибка (HtmlCanvasElement).

1 Ответ

0 голосов
/ 11 апреля 2019

Оказывается, элементы DOM не будут работать с алгоритмом структурированного клона .Изображения, однако, так что я мог бы просто передать изображения холста вместо элемента canvas.Вместо этого я решил проанализировать элементы DOM для извлечения необходимых мне данных и использовал pdfMake для создания файла pdf (из-за размытости при использовании html2canvas / jsPDF).

...