Download a blob from HTTP URL in IE 11

Question

My page generates a URL like this: blob:http%3A//localhost%3A8383/568233a1-8b13-48b3-84d5-cca045ae384f, blob having file data. I am downloading this as a file in every browser except IE 11. How can I download this blob in IE 11? A new tab get open and continuous refreshing happen.

var file = new Blob([data], { type: 'application/octet-stream' });
var reader = new FileReader();
reader.onload = function (e) {
    var text = reader.result;
}
reader.readAsArrayBuffer(file);
var fileURL = URL.createObjectURL(file);
var filename = fileURL.replace(/^.*[\\\/]/, '');
var name = filename + '.doc';

var a = $("<a style='display: none;'/>");
a.attr("href", fileURL);
a.attr("download", name);
$("body").append(a);
a[0].click();
a.remove();

http://stackoverflow.com/questions/36792681/angularjs-receive-and-download-csv/36793906#36793906 see this answer of mine if it helps — Rakesh Chand, May 02 '16 at 09:16
@Rakeschand ,I have already donw with with window.navigator.msSaveOrOpenBlob(blob, "Name your file here"), but i down't want option like open ,save or save as in IE 11,I need same behavior like other browser i.e direct file download in IE 11,is there any possible way to download file directly without any prompt in IE 11, location.href = url,works in other browser but in IE 11 it is saying permission denied — Jeff Dean, May 02 '16 at 10:14
but that solution works for me without any prompt of open, save or save as. — Rakesh Chand, May 02 '16 at 10:17
@Rakeschand your browser must not be IE 11,i think your debugging in IE < 11 , i have already done with these stuff,but what i am getting is prompt for download in IE 11 , as open,save or save as,which actually not my requirement,i want to download it directly without any prompt — Jeff Dean, May 03 '16 at 05:40

score 21 · Answer 1 · answered Feb 05 '18 at 08:00

IE11 Not support URL.createObjectURL()

Work for me.

IE11 I'm use

window.navigator.msSaveOrOpenBlob(blob, fileName);

Or, If check condition.

var blob = 'Blob Data';
if(window.navigator.msSaveOrOpenBlob) {

    // IE11
    window.navigator.msSaveOrOpenBlob(blob, fileName);
} else {

    // Google chome, Firefox, ....
    var url = (window.URL || window.webkitURL).createObjectURL(blob);
    $('#filedownload').attr('download', fileName);
    $('#filedownload').attr('href', url);  
    $('#filedownload')[0].click();
}

Read more: Fixed URL.createObjectURL() function doesn't work in IE 11

Demo: JSFiddle

score 4 · Answer 2 · answered Sep 06 '16 at 15:29

4

Fidel90's answer works fine in IE 11 after changing the IE specific part to this:

(!window.navigator.msSaveBlob ? false : function (blobData, fileName) {
      return window.navigator.msSaveBlob(blobData, fileName);
})

answered Sep 06 '16 at 15:29

zsivjos

41
3

Fidel90 · Answer 3 · 2016-05-02T09:59:49.483

In IE try window.navigator.saveBlob(fileURL,name);.

For further information take a look at the documentation at MSDN.

In the past I've created the following really handy polyfill to check on IE and otherwise use downloading via href. Maybe it will help you (or others):

//check for native saveAs function
    window.saveAs = window.saveAs || window.webkitSaveAs || window.mozSaveAs || window.msSaveAs ||
        //(msIE) save Blob API
        (!window.navigator.saveBlob ? false : function (blobData, fileName) {
            return window.navigator.saveBlob(blobData,fileName);
        }) ||
        //save blob via a href and download
        (!window.URL ? false : function (blobData, fileName) {
            //create blobURL
            var blobURL = window.URL.createObjectURL(blobData),
                deleteBlobURL = function () {
                    setTimeout(function () {
                        //delay deleting, otherwise firefox wont download anything
                        window.URL.revokeObjectURL(blobURL);
                    }, 250);
                };

            //test for download link support
            if ("download" in document.createElement("a")) {
                //create anchor
                var a = document.createElement("a");
                //set attributes
                a.setAttribute("href", blobURL);
                a.setAttribute("download", fileName);
                //create click event
                a.onclick = deleteBlobURL;

                //append, trigger click event to simulate download, remove
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            }
            else {
                //fallback, open resource in new tab
                window.open(blobURL, "_blank", "");
                deleteBlobURL();
            }
        });

You can then use this anywhere in your app as simple as:

window.saveAs(blobData, fileName);

I have already done with the code that your are providing ,but in IE 11,when I am using ,i get below error,0x80070005 - JavaScript runtime error: Access is denied. for the code window.open(blobURL, "_blank", "");,my requirement is to by pass the prompt for open,save or save as ,so that i can download it directly — Jeff Dean, May 03 '16 at 05:58
If your browser is prompting you may depend on your browser settings. — Fidel90, May 03 '16 at 06:16
yes,if the browser IE < 11,and if it is IE 11,you can't change the setting for direct download,because of inbuilt security of IE 11 — Jeff Dean, May 03 '16 at 06:41

Download a blob from HTTP URL in IE 11

3 Answers3

Linked