html2canvas 导致 IE11 挂起并进入“无响应”状态

Question

这在 Firefox 和 Chrome 中非常有效；但是，在 Internet Explorer 11 中，该过程需要很长时间并导致浏览器报告无响应。如果用户等待的时间足够长（从 30 秒到 2 分钟不等），该过程就会解决。

我正在尝试使用 html2canvas 捕获一部分 DOM 的 PNG，然后通过 jsPDF 将 PNG 转换为 PDF。本质上，我有与页面对应的 ID 的元素。我以 PNG 格式捕获页面，然后在 PDF 转换步骤中通过将每个 PNG 作为页面添加到 PDF 将 PNG 扩展为整页。我这样做的代码如下所示：

// 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>

有没有人看到这种行为或有任何解决方法？想知道是否有办法通过超时将进程的当前状态发布到浏览器以避免这种行为？

Answer 1

您是否尝试清理缓存或历史记录？类似的情况有时会发生在我身上，这似乎对我有用

Answer 2

您可以尝试使用ignoreElements属性来忽略不必要的元素以提高修道院性能。请检查此线程和此链接。