为什么ExcelJs插件在IE11中不起作用？

问题描述

我正在使用Angular 9和excelJs 4.1.1，在chrome中可以正常工作，但仅在IE11中可以提供错误：polyfills-es5.js中的字符集无效范围

当我从package.json中删除此依赖项时，一切正常。

我已经添加了https://www.npmjs.com/package/exceljs

中建议的所有polyfills

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",},

请帮助我解决此问题

一切正常，如果我从package.json中删除了exceljs依赖项

解决方法

通过下面的步骤，我终于在IE11中使它工作了

1. 从package.json中删除excelJS和文件保护程序

2. 将CDN路径添加到index.html中的脚本标签

3. 在ts文件中声明以下变量

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

4. 在同一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