Angular ng-zorro 读取Excel表格的内容显示在页面

项目场景：

需求：在前端上传Excel表格，获取表格内容，并显示在页面，存入数据库。避免需要把文件上传到云端浪费存储空间。

---

---

实现效果

1. 点击按钮：
   

2. 选择要读取值的表格
   

3. 读取值
   

4. 可编辑
   

5. 打印数据到控制台
   

6. 点击确定后上传到数据库

---

实现过程

ng-Alain 官网上有详细的方法介绍，https://ng-alain.com/components/xlsx/zh 由于input按钮样式太丑，以下是基于官网的方法做修改

1.引入库

代码如下（示例）：

import {
    AuthService } from '@shared/services/auth.service';
import {
    XlsxService } from '@delon/abc'; // angular9以下引用这个
import {
    XlsxService } from '@delon/abc/xlsx'; // 9及以上引用这个


......

  constructor(
    private xlsx: XlsxService,
    private cdr: ChangeDetectorRef,
  ) {
   }

2.读入数据

Html：上传按钮

<nz-form-item>
      <nz-form-control>
        <nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload" [acl]="'role-admin'">
          <button nz-button>
            <svg
              viewBox="64 64 896 896"
              fill="currentColor"
              width="1em"
              height="1em"
              data-icon="file-excel"
              aria-hidden="true"
            >
              <path
                d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494zM514.1 580.1l-61.8-102.4c-2.2-3.6-6.1-5.8-10.3-5.8h-38.4c-2.3 0-4.5.6-6.4 1.9-5.6 3.5-7.3 10.9-3.7 16.6l82.3 130.4-83.4 132.8a12.04 12.04 0 0010.2 18.4h34.5c4.2 0 8-2.2 10.2-5.7L510 664.8l62.3 101.4c2.2 3.6 6.1 5.7 10.2 5.7H620c2.3 0 4.5-.7 6.5-1.9 5.6-3.6 7.2-11 3.6-16.6l-84-130.4 85.3-132.5a12.04 12.04 0 00-10.1-18.5h-35.7c-4.2 0-8.1 2.2-10.3 5.8l-61.2 102.3z"
              ></path>
            </svg>
            <span>Excel导入</span>
          </button>
        </nz-upload>
      </nz-form-control>
    </nz-form-item>

Html：表格弹窗

<nz-modal
  [(nzVisible)]="isVisible"
  nzTitle="