JavaScript: Save file via data URL in IE

Question

I have an app that converts files. I'm sending a file, and the converted file is being returned in the form of a data URL. Had everything working great in Chrome, but IE (10/11/Edge) is a different story. Have tried several things to no prevail:

1) HTML5 download attribute is not supported in IE. I tried assigning the returned URL as an anchor tag href, but invoking .click() is not supported, and manually clicking on the link does nothing.

2) window.navigator.msSaveOrOpenBlob() and File Saver.js. The SaveAs dialog pops up, but the blob is empty and never downloads anything.

var file= new Blob([returnedFile], {type: "application/pdf"});
window.navigator.msSaveOrOpenBlob(file, 'doc.pdf');
FileSaver.saveAs(file, 'doc.pdf');

Any ideas or suggestions to try?

See [How to download a file without using element with download attribute or a server?](https://stackoverflow.com/questions/38711803/how-to-download-a-file-without-using-a-element-with-download-attribute-or-a-se?) — guest271314, Jun 09 '17 at 16:07
@guest271314 returnedFile is the data URL of the converted file I'm getting back — user7674254, Jun 12 '17 at 11:34

FieryCat · Answer 1 · 2017-06-09T16:09:28.747

0

First, try to verify saveAs existance:

if (window.saveAs) { 
    window.saveAs(blob, name); 
} else { 
    navigator.saveBlob(blob, name); 
}

As for the Blob itself:

create <a>
update href:

a.href = window.URL.createObjectURL(new Blob(returnedFile, {type: "application/pdf"}));
fire click event

More or less the same functionality can be reviewed there: http://jsfiddle.net/VB59f/2/

edited Jun 09 '17 at 16:09

answered Jun 09 '17 at 16:04

FieryCat

1,875
18
28

The loop reverted to navigator.saveBlob, but still did not prompt a save. Creating the tag is what I had originally and works perfectly for Chrome, but gives Access is denied/Invalid state error in IE. – user7674254 Jun 13 '17 at 11:12
@user7674254, when you're taking the file, be sure that you're allowed to grab it (by extra-header: `X-Content-Security-Policy`, `Access-Control-Allow-Origin`, and etc) – FieryCat Jun 13 '17 at 12:08

score 0 · Accepted Answer · answered Jul 18 '17 at 14:32

Ended up getting the browser via navigator.userAgent.match and handling the save based on each browser accordingly:

 var saveData = (data, fileName) => {

IE:

FileSaver.saveAs(blob, fileName + "." + extension);

Chrome:

var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
downloadLink.style.display = "none";
downloadLink.href = data;
downloadLink.download = fileName;
downloadLink.click();

JavaScript: Save file via data URL in IE

2 Answers2

Linked