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

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

1 个答案: