Navigating to a Data URI in IE

Question

I have this extremely simple HTML:

<a download="red.png"
   href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==">
   Static
</a>

In Chrome or Firefox, it downloads red.png as expected.

In IE, it navigates to an error page. See it on JSFiddle.

Now, I know the download attribute is not supported in IE, and that's fine. I'd still expect it to navigate to the "file", allowing the user to save it. Instead, it's navigating to an error page.

Is there a way to get around this problem? The Data URI is generated client-side; creating the file on the server is not an option.

---

Edit: MSDN says:

For security reasons, data URIs are restricted to downloaded resources. Data URIs cannot be used for navigation, for scripting, or to populate frame or iframe elements.

...which I read as "Even though every other browser supports this, we don't know how to do it". So, still looking for a workaround to download a file generated on the client.

Answer 1

Since IE does not support either navigating to a data URI, nor the download attribute, the solution is to use navigator.msSaveBlob to generate the file and prompt the user to save it.

Credit goes to this answer.