html2canvas causes IE11 to hang and enter "Not responding" state

Viewed 960

This works great in Firefox and Chrome; however, in internet explorer 11 the process takes a very long time and results in the browser reporting not responding. If the user waits enough (anywhere from 30s-2 minutes) the process resolves.

I am trying to capture a PNG of a portion of the DOM using html2canvas and afterwards convert the PNG to PDF via jsPDF. Essentially I have elements with IDs that correspond to a page. I capture the page in a PNG, then expand the PNG to a full page in the PDF conversion step by adding each PNG as a page to the PDF. My code for doing so is shown below:

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

Has anyone seen this behavior or have any workarounds? Wondering if there is there a way to release the current state of the process to the browser via timeouts to avoid this behavior?

Edit: I've got an open issue on the library addressing the problem as well (see comments)

2 Answers

have you try to clean up cache n/or history? similar happens to me sometimes with chrome, and that seems to works for me

Related