Png file not downloading in Internet Explorer when using html2canvas.js in Jquery

Question

I have a button in my application which exports the html elements to png file. I did this by using html2canvas.js. It is working fine in Google chrome and Mozilla firefox browsers. But it is not working in Internet Explorer. When i click that button in IE it is just showing the blank page. I have provided the code in the following. Any help is appreciated.

  $("#btnPng").click(function () {
            $("#divPulledPopUpButtons").hide();
            html2canvas($("#pulledPopUp"), {
                onrendered: function (canvas) {
                    var url = canvas.toDataURL();
                    $("<a>", {
                        href: url,
                        download: "CAR.png"
                    })
                    .on("click", function () { $(this).remove() })
                    .appendTo("body")[0].click()
                    $("#divPulledPopUpButtons").show();
                }
            })
        });

Answer 1

I have got the solution for the above issue. It can be resolved by using canvas.msToBlob() function . msToBlob() can be used only for Internet Explorer browser and for other browsers we can go with canvas.toDataURL(). I have provided the code which works fine in Internet Explorer and other broswers.

 $("#btnPng").click(function () {
            $("#divPulledPopUpButtons").hide();

            html2canvas($("#pulledPopUp"), {
                onrendered: function (canvas) {
                   // debugger;
                    if (canvas.msToBlob) { //for IE
                        var blob = canvas.msToBlob();
                        window.navigator.msSaveBlob(blob, 'CAR.png');
                    }
                    else {
                        var url = canvas.toDataURL('image/png', 1.0);// Other broswers except IE
                        $("<a>", {
                            href: url,
                            download: "CAR.png"
                        })
                        .on("click", function () { $(this).remove() })
                        .appendTo("body")[0].click()

                    }
                    $("#divPulledPopUpButtons").show();
                }
            })
        });