Using XLSX in Angular2 with IE 11

Viewed 940

I wanted to share this as it took me a few hours to sort out details by going over the various posts.

The Task: Using XLSX as part of my Angular2 project to import xls, xlsx, or csv type files to generate reports.

The Problem: IE does not support the readAsBinaryString and produces an error where other web browsers do not generate errors

Solution: Manually create prototype function for readAsBinaryString if one does not exist.

The Code: Add One of the following functions to the component that is trying to read the file and use "readAsBinaryString". I suggest #2 but both seem to work.

Option 1:

  IECheck(): void {
    if (FileReader.prototype.readAsBinaryString === undefined) {
      FileReader.prototype.readAsBinaryString = function (fileData) {
        let binary = '';
        const pt = this;
        const reader = new FileReader();
        reader.onload = function (e) {
          const bytes = new Uint8Array(reader.result);
          const length = bytes.byteLength;
          for (let i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i]);
          }
          const f = {target: {result: binary}};
          pt.onload(f);
        }
        reader.readAsArrayBuffer(fileData);
      }
    }
  }

Option 2:

  IECheck(): void {
if (FileReader.prototype.readAsBinaryString === undefined) {
  FileReader.prototype.readAsBinaryString = function (fileData) {
    const pt = this;
    const reader = new FileReader();
    reader.onload = function (e) {
       const blobURL = URL.createObjectURL(fileData);
       const xhr = new XMLHttpRequest;
       xhr.open('get', blobURL);
       xhr.overrideMimeType('text/plain; charset=x-user-defined');
       xhr.onload = function () {
         const g = {target: {result: xhr.response}};
         pt.onload(g)
       }
       xhr.send();
    }
    reader.readAsArrayBuffer(fileData);
  }
}

}

In the constructor or OnInit(If using lifecycle hooks) call the IECheck function

  this.IECheck();

Result: XLXS will upload documents in IE

Let me know your thoughts on this, Happy codding!

0 Answers
Related