I'm trying to save a SVG from a canvas as PNG file using javascript. The below code seems to work fine on Chrome and Firefox, but in IE 10 i get the below error in my console.

SCRIPT5: Access is denied.

FInd below the code that I've used:

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

The console points to the click event that I'm trying to invoke.

I'm trying to save a SVG from a canvas as PNG file using javascript. The below code seems to work fine on Chrome and Firefox, but in IE 10 i get the below error in my console.

SCRIPT5: Access is denied.

FInd below the code that I've used:

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

The console points to the click event that I'm trying to invoke.

• javascript
• jquery
• html
• svg
• html5-canvas

• I don't think you can force click on a anchor with download attr, it would be invasive, maybe that is the issue? IE has more caution? – enapupe Commented Feb 24, 2014 at 13:14

2 Answers 2

The download attribute is not implemented in Internet Explorer.

http://caniuse./download

For Internet explorer you can use the "SaveAs" mand.

A note about security:

Browsers serve 2 masters.

Browsers must serve the user's request to save content to their local drive.

Browsers must also restrict potentially malicious code from automatically downloading bits onto the users local drive.

To reconcile the 2 tasks, browsers take the approach that users can download content to their local drive after some confirming process (like a Save button).

Using a[0].click(); to confirm for the user runs contrary to the browser's attempt to provide security.

FileSave.js is a cross-browser library that will save your canvas to the users local drive. It conforms to security issues by requiring the user to click a button to OK the download.

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

Necromancing.
On IE, you don't need to create a link.
It's sufficient to create a new 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);