如何使用exceljs在Angular中导入EXCEL文件

Question

我想用Angular代码读取Excel文件。我的文件存储在本地系统的某个位置，例如C:/data/test.xlsx。

我已经尝试使用exceljs的readFile()和load()方法进行加载，但它们都无法读取任何内容，反而会出现错误。

- Ravi Shankar Dubey

Answer 1

我找到了一种用Angular代码读取Excel文件的方法。将文件转换为ArrayBuffer，然后使用exceljs读取它。

1. 在Angular的service/component中导入Exceljs。

    import * as Excel from 'exceljs/dist/exceljs.min.js';

---

2. 修改 tsconfig.app.json 文件

    compilerOptions: {
       paths": {
             "exceljs": [
               "node_modules/exceljs/dist/exceljs.min.js"
             ]
          }
     }

3. 从HTML代码中打开文件。

    <input id="uploadBtn" type="file" (change)="readExcel($event)" 
           class="upload input-common" required />

4. 使用exceljs读取文件。

    readExcel(event) {
        const workbook = new Excel.Workbook();
        const target: DataTransfer = <DataTransfer>(event.target);
        if (target.files.length !== 1) {
          throw new Error('Cannot use multiple files');
        }

        /**
         * Final Solution For Importing the Excel FILE
         */

        const arryBuffer = new Response(target.files[0]).arrayBuffer();
        arryBuffer.then(function (data) {
          workbook.xlsx.load(data)
            .then(function () {

              // play with workbook and worksheet now
              console.log(workbook);
              const worksheet = workbook.getWorksheet(1);
              console.log('rowCount: ', worksheet.rowCount);
              worksheet.eachRow(function (row, rowNumber) {
                console.log('Row: ' + rowNumber + ' Value: ' + row.values);
              });

            });
        });
      }

此外，polyfill.ts必须按照以下顺序引用.. import 'exceljs/dist/exceljs.min.js'; import 'zone.js/dist/zone';

- Ravi Shankar Dubey