CODEWITHSUNDEEP
javascripthighchartshtml5-canvasjspdfhtml2canvas
ibrahim noureddine
ibrahim noureddine

Reputation: 99

html2canvas of a Highcharts chart not working fine on IE

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,

Upvotes: 1

Views: 1707

Answers (2)

MukundK
MukundK

Reputation: 86

I have faced the similar issue with IE11 while capturing the highchart charts which generates the svg charts. We used the technique of converting all svg images to canvas. Place the newly created canvas at svg. Now capture the dom and print/download it. Once print/download is done remove the canvas from dom again. It was working on chrome, FF and IE. We used the canvg npm module to convert svg to canvas as specified in the answer 1 by ibrahim noureddine

Upvotes: 0

ibrahim noureddine
ibrahim noureddine

Reputation: 99

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);

Upvotes: 1

Related Questions