Bug: IE 11 throws an exception when HTML contains an HTML entity

[joshcampbell191]

Are you requesting a feature, reporting a bug or asking a question?

Reporting a bug.

What is the current behavior?

If an html element contains an html entity (ex. ’), it fails to convert the HTML to image since IE doesn't support ChildNode.remove. It got further when using element-remove-polyfill, however I can't remember if it was able to complete successfully.

What is the expected behavior?

It should convert the element without an exception.

How would you reproduce the current behavior (if this is a bug)?

1. Print the PDF from the tested page in IE 11

Provide the test code and the tested page URL (if applicable)

Tested page URL: https://plnkr.co/edit/sB7at2i6UDDDTMvA

Test code

Survey
    .StylesManager
    .applyTheme("modern");

var json = {
    "pages": [
        {
            "questions": [
                {
                    "type": "html",
                    "html": "test’s"
                }
            ]
        }
    ]
};

window.survey = new Survey.Model(json);

survey
    .onComplete
    .add(function (result) {
        document
            .querySelector('#surveyResult')
            .textContent = "Result JSON:\n" + JSON.stringify(result.data, null, 3);
    });

$("#surveyElement").Survey({model: survey});

function saveSurveyToPdf(filename, surveyModel, pdfWidth, pdfHeight) {
    var options = {
        fontSize: 14,
        margins: {
            left: 10,
            right: 10,
            top: 10,
            bot: 10
        },
        format: [pdfWidth, pdfHeight]
    };
    var surveyPDF = new SurveyPDF.SurveyPDF(json, options);
    surveyPDF.data = surveyModel.data;
    surveyPDF.save(filename);
}

document
    .getElementById("saveToPDFbtn")
    .onclick = function () {
        var pdfWidth = survey.pdfWidth || 210;
        var pdfHeight = survey.pdfHeight || 297;
        saveSurveyToPdf("surveyResult.pdf", survey, pdfWidth, pdfHeight);
    };

Specify your

• browser: Internet Explorer 11
• browser version: OS Build 19042.870
• surveyjs platform (angular or react or jquery or knockout or vue): jQuery
• surveyjs version: 1.8.41

[gologames]

Hello,

We investigated the issue. Please, let me describe what we know now

First of all for proper work jsPDF library (which is used by SurveyPDF) you should load on page jsPDF IE polyfill. Due to some additional errors you might also use polyfill for "remove" method (probably with additional check in case of parentNode is null or modify source code of htmlToImage method below), "Array.from" method and something else

Next we faced with SecurityError when call canvas.toDataURL in our HTML to image source code. We tried set crossOrigin property of Image instance to "anonymous", but this doesn't help. Most likely because we put svg element image and canvas became tainted

To escape this we attempted to use canvg library, but it didn't work out for us. In exported PDF file we see nothing or black screen (ignoreClear option and other techniques don't help)

So as a result, unfortunately, at this moment we have no idea how process issue with exporting HTML to image in IE11. You can try to find a solution and make live sample for us (fork repository or reassign SurveyHelper.htmlToImage method for example). In this case we will investigate it and probably merge with main branch

In conclusion as a workaround you can use Edge browser (we checked this case works fine in Edge) or export HTML via our standard render with replacing ’ to ' before export according to this convention. Here is live sample of this approach (works with IE 11):

Thanks, Alex SurveyJS Team

[joshcampbell191]

Thanks for the detailed response and the workaround. We've gone ahead and replaced the instances of HTML entities to avoid the conversion to image within our survey for the time being. I'll keep an eye out for other potential solutions when time permits.

[gologames]

Hello,

Fine! Feel free to contact us in case of any further questions

Thanks, Alex SurveyJS Team

[gologames]

Note for SurveyJS:

Issue can occurs due to we create new document instance (when convert to XML). New document instance has different CORS