Question

我正在尝试使用javascript从画布中将SVG保存为PNG文件。以下代码似乎在Chrome和Firefox上运行正常，但在IE 10中我在控制台中收到以下错误。

SCRIPT5：访问被拒绝。

低于我使用过的代码：

var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

var a = $('<a>').attr("href", canvas.toDataURL("image/png")).attr("download", title + "png").appendTo($('#VisitsContainer'));

a[0].click();
a.remove();

控制台指向我正在尝试调用的click事件。

Answer 1

Internet Explorer中未实现download属性。

http://caniuse.com/download

对于Internet Explorer，您可以使用“SaveAs”命令。

关于安全性的说明：

浏览器服务2个主人。

浏览器必须满足用户将内容保存到本地驱动器的请求。

浏览器还必须限制潜在的恶意代码自动将位下载到用户本地驱动器上。

为了协调这两项任务，浏览器采用的方法是用户可以在确认过程后将内容下载到本地驱动器（如“保存”按钮）。

使用a[0].click();确认用户运行与浏览器提供安全性的尝试相反。

FileSave.js是一个跨浏览器库，可将画布保存到用户本地驱动器。它要求用户单击按钮以确定下载，从而符合安全问题。

https://github.com/eligrey/FileSaver.js/

Answer 2

Necromancing。
在IE上，您不需要创建链接。
创建一个新的Blob就足够了。

function saveMe(data, fileName)
{

    var json = JSON.stringify(data),
        blob = new Blob([json], { type: "octet/stream" }),
        url = window.URL.createObjectURL(blob);

    if (navigator.msSaveOrOpenBlob) 
    {
        navigator.msSaveOrOpenBlob(blob, fileName);
        return;
    }
    else if (window.navigator.msSaveBlob)
    { // for IE browser
        window.navigator.msSaveBlob(blob, fileName);
        return;
    }

    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";

    a.href = url;
    a.download = fileName;
    a.click();
    window.URL.revokeObjectURL(url);
}


var data = { x: 42, s: "hello, world", d: new Date() }, fileName = "my-download.json";

// saveData(data, fileName);
saveMe(data, fileName);

IE 10：SCRIPT5：锚点击事件的访问被拒绝错误

2 个答案: