JavaScript Download file from Base64 string not working in IE

Question

Want to save/download Base64 as pdf file using javascript. Below code works in chrome but not in IE. I tried many different ways but not working in internet explorer.

Whats wrong with IE ?

function Base64ToPdf(fileName, base64String) {
    const linkSource = "data:application/pdf;base64," + base64String;
    const downloadLink = document.createElement("a");

    downloadLink.href = linkSource;
    downloadLink.download = fileName;
    downloadLink.click();
  }


// Test 
var string = 'Hello World!';
var encodedString = btoa(string);

Base64ToPdf("test.pdf", encodedString);

I have tried with https://stackoverflow.com/a/48796495/2247677 which also not works in IE.

@RobbyCornelissen I have tested solution given at https://stackoverflow.com/a/48796495/2247677 but none is working for IE. — Dipak Telangre, May 08 '20 at 09:42
I'll remove my close vote, but doubt that you will get a better solution. — Robby Cornelissen, May 08 '20 at 09:55
@JuanLuisFaylon Expecting IE >=9 but its not even working in IE 11. — Dipak Telangre, May 08 '20 at 10:01
I see. Is this run in the frontend / client / browser side? Also, do you have the error logs, if any? I saw that it's only supported from IE 10 onwards https://caniuse.com/#search=btoa also, have you tried putting window.btoa instead of btoa? If IE 9 is needed, you may need to have polyfills for it. — Don F., May 08 '20 at 10:33
@RobbyCornelissen Thanks ! I tried converting from Base64 to blob first and then download. It seems to be working. — Dipak Telangre, May 08 '20 at 11:51
IE [does not support the `download` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Browser_compatibility) on `` elements. I imagine that's the reason why the code above doesn't work as expected. — GOTO 0, May 09 '20 at 08:36

score 1 · Accepted Answer · answered May 08 '20 at 11:52

I tried many solutions to download Base64 to PDF but not succeeded for IE. Finally I have decided to convert Base64 to Blob first and its working fine in IE 11 and chrome as well.

Full code looks like TS :

export class FileHelper {
  static Base64ToPdf(fileName: string, base64String: string) {
    if (window.navigator && window.navigator.msSaveBlob) {
      const blob = this.Base64toBlob(base64String);
      window.navigator.msSaveBlob(blob, fileName);
    } else {
      const linkSource = "data:application/pdf;base64," + base64String;
      const downloadLink = document.createElement("a");
      downloadLink.href = linkSource;
      downloadLink.download = fileName;
      downloadLink.click();
    }
  }

  static Base64toBlob(
    b64Data: string,
    contentType = "application/pdf",
    sliceSize = 512
  ) {
    const byteCharacters = atob(b64Data);
    const byteArrays = [];

    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
      const slice = byteCharacters.slice(offset, offset + sliceSize);

      const byteNumbers = new Array(slice.length);
      for (let i = 0; i < slice.length; i++) {
        byteNumbers[i] = slice.charCodeAt(i);
      }

      const byteArray = new Uint8Array(byteNumbers);
      byteArrays.push(byteArray);
    }

    const blob = new Blob(byteArrays, { type: contentType });
    return blob;
  }
}

Thanks for posting the solution to this issue. I suggest you try to mark your own answer to this question after 48 hrs when it is available to mark. It can help other community members in the future in similar kinds of issues. Thanks for your understanding. — Deepak-MSFT, May 08 '20 at 14:57

JavaScript Download file from Base64 string not working in IE

1 Answers1