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

时间:2019-06-13 21:04:29

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

这在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>

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

编辑:我在图书馆也遇到了一个未解决的问题(请参见评论)

2 个答案:

答案 0 :(得分:0)

您是否尝试清除缓存n /或历史记录?铬有时会在我身上发生类似的情况,对我来说似乎很有效

答案 1 :(得分:0)

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