Why ExcelJs plugin is not working in IE11?

Question

I am using Angular 9 and excelJs 4.1.1, this is working fine in chrome but only in IE11 giving Error: Invalid range in character set in polyfills-es5.js

When I remove the this dependency from package.json, everything working fine.

I have added all the polyfills suggested in https://www.npmjs.com/package/exceljs

Polyfills.ts

import 'core-js/modules/es.promise';
import 'core-js/modules/es.string.includes';
import 'core-js/modules/es.object.assign';
import 'core-js/modules/es.object.keys';
import 'core-js/modules/es.symbol';
import 'core-js/modules/es.symbol.async-iterator';
import 'regenerator-runtime/runtime';
import './unicode-regex-polyfill';
import 'zone.js/dist/zone';

unicode-regex-polyfill.ts

import rewritePattern from 'regexpu-core';
import { generateRegexpuOptions } from '@babel/helper-create-regexp-features-plugin/lib/util';

const { RegExp } = global;
try {
  new RegExp('a', 'u');
} catch (err) {
  // @ts-ignore
  global.RegExp = function(pattern, flags) {
    if (flags && flags.includes('u')) {
      return new RegExp(
        rewritePattern(
          pattern,
          flags,
          generateRegexpuOptions({ flags, pattern })
        )
      );
    }
    return new RegExp(pattern, flags);
  };
  // @ts-ignore
  global.RegExp.prototype = RegExp;
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es5",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2017", "dom"],
    "paths": {
      "@app/*": ["src/app/*"],
      "@environments/*": ["src/environments/*"],
      "exceljs": [
        "node_modules/exceljs/dist/exceljs.min"
      ],
      // "@assets/images/*": ["src/assets/images*"]
    }
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

package.json

  "dependencies": {
    "@angular-redux/store": "^10.0.0",
    "@angular/animations": "~9.0.3",
    "@angular/cdk": "^9.2.4",
    "@angular/common": "~9.0.3",
    "@angular/compiler": "~9.0.3",
    "@angular/core": "~9.0.3",
    "@angular/forms": "~9.0.3",
    "@angular/material": "^9.2.4",
    "@angular/platform-browser": "~9.0.3",
    "@angular/platform-browser-dynamic": "~9.0.3",
    "@angular/router": "~9.0.3",
    "install": "^0.13.0",
    "jspdf": "1.4.1",
    "jspdf-autotable": "^3.5.6",
    "ngx-mat-select-search": "^3.0.0",
    "npm": "^6.14.7",
    "redux": "^4.0.1",
    "redux-devtools": "^3.5.0",
    "redux-devtools-extension": "^2.13.8",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
    "exceljs": "^4.1.1",
  },

Kindly please help me to resolve this

Everything working fine, if I remove the exceljs dependency from package.json

https://github.com/exceljs/exceljs/issues/658 – angel.bonev Aug 28 '20 at 08:47 — angel.bonev, Aug 28 '20 at 08:47
stop using ie 11 man https://death-to-ie11.com/ – Shiva Sai Aug 28 '20 at 08:55 — Shiva Sai, Aug 28 '20 at 08:55

score 1 · Answer 1 · answered Sep 02 '20 at 03:47

I have finally got it working in IE11 by doing below stpes

remove excelJS and file saver from package.json
add cdn paths to script tag in index.html

declare below variables as it is in ts files

declare var ExcelJS: any ;
declare var saveAs: any;

below code in same ts

 var workbook = new ExcelJS.Workbook();
 var worksheet = workbook.addWorksheet('SheetName');

 workbook.xlsx.writeBuffer().then(function(buffer) {
   saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 
   'FileName.xlsx');
 });

ref : https://supportcenter.devexpress.com/ticket/details/t900163/datagrid-the-latest-version-of-exceljs-doesn-t-work-in-ie11

Why ExcelJs plugin is not working in IE11?

1 Answers1