html2canvas of a Highcharts chart not working fine on IE

Question

I am trying to export a Highcharts chart and send it as email in js. To do that I used html2canvas library then added it to a jspdf object . everything worked fine on chrome and Firefox , however an empty pdf appeared when doing this on IE . A pseudo-code :

 var
    form = $('#main-content'),
    cache_width = form.width(),
    a4 = [100, 100]; 
    var canvas1 = html2canvas(form, {
        imageTimeout: 6000,
        removeContainer: true
    });
    canvas1.then(function (canvas) {

        var
        img1 = canvas.toDataURL("image/JPEG", 1.0);

        doc.addImage(img1, 'PNG', 0, 50, 440, 300);

    });



    Promise.all([canvas1]).then(function () {

        var pdfString = window.btoa(doc.output());
        var ob = {};
        ob.mail = mailsList;
        ob.title = title;
        ob.pdf = pdfString;

        $.ajax({
            type: 'POST',
            url: "/Charts/SendChart_ByEmail",
            data: JSON.stringify(ob)
        });

since IE does not support promises i used an external library (bluebird.js) but when rendering the div containing the chart , the result pdf is empty , however i tried to render another div not containing chart it worked .

is it a Highcharts bug ? bluebird issue ? any workaround ?

thank you,

Answer 1

the issue was that canvas.todatauri does not work on IE if the div contains SVG . so i used canvasg.. replaced the above code by :

 var chart = $('#main-content').highcharts();
        var svg = chart.getSVG({
            exporting: {
                sourceWidth: chart.chartWidth,
                sourceHeight: chart.chartHeight
            }
        });
        var mycanvas = document.createElement('canvas');
        canvg(mycanvas, svg);
        var imgtest = mycanvas.toDataURL("image/JPEG");
        doc.addImage(mycanvas.toDataURL("image/JPEG"), 'PNG', 0, 50, 440, 300);