html2canvas приводит к зависанию IE11 и переходу в состояние «Не отвечает» - PullRequest
Новая
       33

html2canvas приводит к зависанию IE11 и переходу в состояние «Не отвечает»

2 голосов
/ 14 июня 2019

Это прекрасно работает в Firefox и Chrome; однако в Internet Explorer 11 этот процесс занимает очень много времени и приводит к тому, что браузер не отвечает. Если пользователь ждет достаточно (от 30 с до 2 минут), процесс разрешается.

Я пытаюсь захватить PNG части DOM с помощью html2canvas и затем преобразовать PNG в PDF с помощью jsPDF. По сути, у меня есть элементы с идентификаторами, которые соответствуют странице. Я записываю страницу в PNG, затем расширяю PNG до полной страницы на шаге преобразования PDF, добавляя каждый PNG как страницу в PDF. Мой код для этого показан ниже: 

// Default to GMSRD1
        var fileName = "record-of-discussion-form.pdf";
        var pages = ["GMSRD1_page1", "GMSRD1_page2", "GMSRD1_page3", "GMSRD1_page4"]

        if (this.state.parsed.formId === "GMSC1") {
            fileName = "consultee-form.pdf"
            pages = ["GMSC1_page1", "GMSC1_page2", "GMSC1_page3"];
        }
        if (this.state.parsed.formId === "GMSA1") {
            fileName = "assent-form.pdf"
            pages = ["GMSA1_page1", "GMSA1_page2"];
        }
        if (this.state.parsed.formId === "GMSW2" ) {
            fileName = "withdraw-form.pdf"
            pages = ["GMSW2_page1", "GMSW2_page2", "GMSW2_page3"];
        }

        // Objct to build 
        var pdf = new jsPDF({
            orientation: "p",
            unit: "pt",
            format: "a4",
            compression: true
        });

        // Canvas creation promises
        let promises = [];

        // Capture canvas for each page 
        pages.forEach(page => {
            let element = document.getElementById(page);
            promises.push(this.getCanvasData(element));
        });

        Promise.all(promises).then(dataUrls => {
            dataUrls.forEach((dataUrl, i) => {
                pdf.addImage(dataUrl, "PNG", 45, 40, 800 * .63, 980 * .7, undefined, "FAST");

                pdf.addPage();
            });

            let testOutput = pdf.output('arraybuffer'); // arraybuffer 
            var uint8Array = new Uint8Array(testOutput);
            var array = Array.from(uint8Array)

            // <DO something w/ data below>

Кто-нибудь видел такое поведение или есть обходные пути? Хотите знать, есть ли способ сообщить текущее состояние процесса в браузере через тайм-ауты, чтобы избежать этого поведения?

Редактировать: у меня есть открытая проблема в библиотеке, которая также решает эту проблему (см. Комментарии)

Ответы [ 2 ]

1 голос
/ 14 июня 2019

Вы пытались очистить кэш н или историю? подобное случается со мной иногда с хромом, и это, кажется, работает для меня

0 голосов
/ 14 июня 2019

Вы можете попытаться использовать атрибут ignoreElements , чтобы игнорировать ненужные элементы для повышения производительности монастыря.пожалуйста, отметьте эту тему и эту ссылку .

...