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

【问题标题】：html2canvas causes IE11 to hang and enter "Not responding" statehtml2canvas 导致 IE11 挂起并进入“无响应”状态
【发布时间】：2019-07-18 03:45:24
【问题描述】：

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

我正在尝试使用 html2canvas 捕获 DOM 的一部分的 PNG，然后通过 jsPDF 将 PNG 转换为 PDF。本质上，我的元素的 ID 对应于页面。我以 PNG 格式捕获页面，然后通过将每个 PNG 作为页面添加到 PDF 中，在 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>

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

编辑：我有一个关于图书馆的未解决问题也解决了这个问题（参见 cmets）

【问题讨论】：

我能问一下为什么这需要在 IE 中工作，而不是在 Edge 中工作吗？（你可能有充分的理由，但你也可能试图解决一个基本上不相关的浏览器，因为 Edge 和 Windows 7 在半年后达到真正的 EOL）
我讨厌 IE。不要误会我的意思。这是客户的要求:(
“我得到报酬让它工作”基本上是唯一真正的原因 =) 话虽如此，html2canvas 是 github 上的一个开源项目，所以如果你还没有在@上问过这个987654321@ 但是，您可能应该这样做（因为发布到 SO 意味着您已经用尽了您的选择，如果您还没有询问他们的问题跟踪器，这将不是真的，而且因为 2 分钟与几秒钟喜欢就像 html2canvas 的人们也想知道的错误一样）。
@Mike'Pomax'Kamermans 已经完成 ;) ...希望在这里提出同样的问题，以提高知名度github.com/niklasvh/html2canvas/issues/1889
当你有的时候总是在你的帖子中提及，因为最好的答案不在这里。它在 html2canvas 代码库和文档中 =)

标签： javascript internet-explorer internet-explorer-11 jspdf html2canvas

【解决方案1】：

您是否尝试过清理缓存 n/或历史记录？ chrome 有时也会发生类似的情况，这似乎对我有用

【讨论】：

【解决方案2】：

您可以尝试使用ignoreElements 属性来忽略不必要的元素以提高修道院的性能。请检查this thread和this link。

【讨论】：

嗯......这可能是一个想法，尽管我得到的每个元素都是一个页面，它实际上包含了我想要的所有内容。我不确定是否可以从这些页面中删除元素。