在 Jquery 中使用 html2canvas.js 时，无法在 Internet Explorer 中下载 PNG 文件

Question

我的应用程序中有一个按钮，可将 html 元素导出为 png 文件。我通过使用 html2canvas.js 做到了这一点。它在 Google chrome 和 Mozilla firefox 浏览器中运行良好。但它在 Internet Explorer 中不起作用。当我在 IE 中单击该按钮时，它只是显示空白页。我在下面提供了代码。任何帮助表示赞赏。

  $("#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

我已经找到了解决上述问题的方法。它可以通过使用 canvas.msToBlob() 函数来解决。 msToBlob() 只能用于 Internet Explorer 浏览器，对于其他浏览器，我们可以使用 canvas.toDataURL()。我提供了在 Internet Explorer 和其他浏览器中运行良好的代码。

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