Data URI doesn't work with IE

Question

Im trying to dynamically create a CSV file using javascript that the user can download. This only has to work in IE.

The html the javascript generates looks something like this

 <a href="data:application/octet-stream,field1%2Cfield2%0Afoo%2Cbar%0Agoo%2Cgai%0A">CSV</a>

Which seams to work fine in chrome but IE10 just breaks.

Is there a better way to dynamically create a file using JavaScript and then give the user a link to download it? I cant use PHP as the entire system needs to run on the client-side due to restrictions placed by the user. The system all needs to work on a touch screen (with no right click option) so the link needs to give the user the ability to download, not open the file.

Answer 1

I had the same problem, I download the data uri in this way with Chrome:

var link = document.createElement("a");
link.download = dataItem.Filename;
link.href = data;
link.click();

But it does not work in Internet Explorer. I have found a library that works in Internet Explorer, https://github.com/rndme/download

The only issue for me is the dowload of files with longer MIME type like odt, docx, etc. For all the other kind of files it look great!

Answer 2

Internet Explorer 10 doesn't support the data protocol on the a element. Per the documentation, the only supported elements/attributes are the following:

• object (images only)
• img
• input type=image
• link
• CSS declarations that accept a URL, such as background, backgroundImage, and so on.

You should know that what you're attempting to do smells like a phishing attempt; for this reason you shouldn't expect browsers to support this pattern. You can read more about data-uri phishing in the paper Phishing by data URI.