在 Angular 中使用 excelJS 读取 xlsx 文件

Question

我想读取一个源文件，对其进行编辑，然后将其发送给用户进行下载。但我无法从项目中读取源文件。这是我正在使用的 excelJS 中文件读取的实现：

import {FormArray, FormControl, FormGroup, Validators} from '@angular/forms';
import { Component, OnInit} from '@angular/core';
import * as ExcelJS from "exceljs/dist/exceljs.min.js";


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {
  form: FormGroup
  stepCounter: number
  itemCounter: number
  data: dataInterface

  ngOnInit() {
    this.form = new FormGroup({
      companyName: new FormControl('', Validators.required),
      items: new FormArray([])
    })
    this.data = {}
    this.itemCounter = 0
    this.stepCounter = 1
    this.addItem()
    let workbook: ExcelJS.Workbook = new ExcelJS.Workbook();
    workbook.xlsx.readFile('/src/assets/sourceWorkbook.xlsx')
      .then(function() {
        console.log('Done!')
        console.log(workbook)
      });
  }

还要添加 excelJS 模块，我在 angular.json 中添加了一个字符串：

"scripts": [
              "node_modules/exceljs/dist/exceljs.min.js"
            ]

问题是我总是遇到这样的错误：

ERROR Error: "Uncaught (in promise): TypeError: i.constants is undefined
exists/<@http://localhost:4200/vendor.js:62894:86961
ZoneAwarePromise@http://localhost:4200/polyfills.js:973:33
exists@http://localhost:4200/vendor.js:62894:86936
e/<@http://localhost:4200/vendor.js:62894:383830
u@http://localhost:4200/vendor.js:62908:149223
s/o._invoke</<@http://localhost:4200/vendor.js:62908:148977
y/</e[t]@http://localhost:4200/vendor.js:62908:149580
n@http://localhost:4200/vendor.js:62894:382317
s@http://localhost:4200/vendor.js:62894:382521
i/</<@http://localhost:4200/vendor.js:62894:382580
ZoneAwarePromise@http://localhost:4200/polyfills.js:973:33
i/<@http://localhost:4200/vendor.js:62894:382460
./node_modules/exceljs/dist/exceljs.min.js/</<[135]</</O</n<.value<@http://localhost:4200/vendor.js:62894:384180
ngOnInit@http://localhost:4200/main.js:579:23
callHook@http://localhost:4200/vendor.js:10960:18
callHooks@http://localhost:4200/vendor.js:10924:25
executeInitAndCheckHooks@http://localhost:4200/vendor.js:10865:18
refreshView@http://localhost:4200/vendor.js:17228:45
renderComponentOrTemplate@http://localhost:4200/vendor.js:17336:20
tickRootContext@http://localhost:4200/vendor.js:18805:34
detectChangesInRootView@http://localhost:4200/vendor.js:18839:20
detectChanges@http://localhost:4200/vendor.js:20479:46
tick@http://localhost:4200/vendor.js:45046:22
_loadComponent@http://localhost:4200/vendor.js:45096:14
bootstrap@http://localhost:4200/vendor.js:45022:14
_moduleDoBootstrap/<@http://localhost:4200/vendor.js:44635:25
_moduleDoBootstrap@http://localhost:4200/vendor.js:44631:44
bootstrapModuleFactory/</</<@http://localhost:4200/vendor.js:44586:26
invoke@http://localhost:4200/polyfills.js:377:30
onInvoke@http://localhost:4200/vendor.js:43769:33
invoke@http://localhost:4200/polyfills.js:376:36
run@http://localhost:4200/polyfills.js:136:47
scheduleResolveOrReject/<@http://localhost:4200/polyfills.js:870:40
invokeTask@http://localhost:4200/polyfills.js:412:35
onInvokeTask@http://localhost:4200/vendor.js:43747:33
invokeTask@http://localhost:4200/polyfills.js:411:40
runTask@http://localhost:4200/polyfills.js:180:51
drainMicroTaskQueue@http://localhost:4200/polyfills.js:582:39

我的文件位于：/src/assets/sourceWorkbook.xlsx

Answer 1

我在尝试读取 xlsx 文件时遇到同样的错误。在加载上传的文件时效果很好，使用函数 load 而不是 readFile。