Angular 4file download (Internet Explorer 11)

Question

Sorry if there is another post talking about this, but I can't find it and it's driving me crazy.

I made a webservice that returns a file in form of a byte array, and it works fine. After that,

On the other side, I'm developing an Angular 4 site that calls de webservice mentioned and try to download the obtained file. So I came up with the following code:

downloadFile() {
  let theFile;
  this.http.get(FILE_DOWNLOAD_ENDPOINT, { responseType: 'blob' })
    .subscribe(data => {
      theFile = new Blob([data], { type: 'application/octet-stream' });
      let url = window.URL.createObjectURL(theFile);
      console.log(url);
      const link = document.createElement('a');
      link.href = url;
      link.download = 'file.pdf';
      console.log(link);
      link.click();
    },
    error => {
      console.log(error);
    },
    () => console.log('File download completed.'));
}

This code works as expected using Chrome, but Internet Explorer doesn't download the file to the browser.

Thanks to console.log() I can see that the link element created is different:

blob:http://localhost:4200/55def972-dd2b-47dc-ada9-bc5514a41756 (chrome)
blob:4F55D3BD-664D-429D-9EE6-D5D906F9CBAD (IE11)

Could anybody help me? Thanks a lot in advance!!

score 1 · Answer 1 · answered Dec 20 '17 at 11:43

1

I had to implement same feature for my app and I used this library: File-Saver

It has come quiet handy.

answered Dec 20 '17 at 11:43

Bunyamin Coskuner

8,719
1
28
48

Thanks a lot for your answer!!. I heard about it, but I was trying to do it without more dependencies. – Nemezih Dec 20 '17 at 12:04
It is not a big library, you can even copy paste it's code into your project. – Bunyamin Coskuner Dec 20 '17 at 12:05

score 1 · Answer 2 · answered Dec 20 '17 at 12:08

Finally, I found this similar post. I modified my function and now look like this (it works perfectly now both in Chrome and IE11):

downloadFile() {
  let theFile;
  this.http.get(FILE_DOWNLOAD_ENDPOINT, { responseType: 'blob' })
    .subscribe(data => {
      theFile = new Blob([data], { type: 'application/octet-stream' });
      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(theFile, 'file.pdf');
      } else {
        const url = window.URL.createObjectURL(theFile);
        window.open(url);
        const link = document.createElement('a');
        link.href = url;
        link.download = 'file.pdf';
        link.click();
      }
    },
    error => {
      console.log(error);
    },
    () => console.log('File download completed.'));
}

Thank you!

Thank you for this, this was killing me. – Jeffrey Bane May 22 '20 at 18:05 — Jeffrey Bane, May 22 '20 at 18:05

Angular 4file download (Internet Explorer 11)

2 Answers2