Save virtual file get by REST API on Internet Explorer download parameter doesn't work

Question

I have this code that correctly works on most of browsers except IE:

<a href="http://xxx.xxx.xxx.xxx/presets/current" download="configuration.bin">
    Save
</a>

the problem is that download parameter doesn't work on IE.

To correct it I've tried this code

var request = new XMLHttpRequest();
request.open('GET', "http://xxx.xxx.xxx.xxx/presets/current", true);
request.responseType = 'blob';
request.onload = function() {
    var reader = new FileReader();
    reader.readAsDataURL(request.response);
    reader.onload =  function(e){
        var blob = new Blob( [e.target.result] );
        navigator.msSaveBlob( blob, 'configuration.bin' );
        };
    };
request.send();

On AngularJS I've also tried using $http like this code:

$http({method: 'GET', url: "http://xxx.xxx.xxx.xxx/presets/current"})
    .success(function(data, status, headers, config) {
        var blob = new Blob([data]);
        navigator.msSaveBlob( blob, 'configuration.bin' );
    })

The problem is that the file size downloaded on Chrome is 134K and the file downloaded on IE with this code is 180K

Question: How could I save file exactly as I get it?

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/msSaveBlob is obsolete — mplungjan, Mar 17 '20 at 09:57
https://stackoverflow.com/questions/12168909/blob-from-dataurl — mplungjan, Mar 17 '20 at 09:59

Yu Zhou · Answer 1 · 2020-03-18T05:52:46.910

In IE, you can only use msSaveBlob to download files and you need to set the blob type correctly according to your demand. The cross-browser method should be like this:

//change to the type you need
var blob = new Blob([byteArray], { type: 'application/pdf' });
//output file name
var fileName = "test.pdf";

//detect whether the browser is IE/Edge or another browser
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
  //To IE or Edge browser, using msSaveorOpenBlob method to download file.
  window.navigator.msSaveBlob(blob, fileName);
} else {
    //To another browser, create a tag to downlad file.
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    document.body.appendChild(a);
    a.setAttribute('style', 'display: none');
    a.href = url;
    a.download = fileName;
    a.click();    
    window.URL.revokeObjectURL(url);
    a.remove();
}

I use this method to download file and the size is the same in IE and Chrome. You could also refer to these similar threads: link1, link2.

Save virtual file get by REST API on Internet Explorer download parameter doesn't work

1 Answers1