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

a 夏天 提交于 2019-12-12 00:43:38

问题


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

回答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();
                }
            })
        });


来源:https://stackoverflow.com/questions/37991846/png-file-not-downloading-in-internet-explorer-when-using-html2canvas-js-in-jquer

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!