纯前端使用ExcelJs 实现导入导出功能

纯前端使用ExcelJs 实现导入导出功能

需求:

使用ExcelJs 实现前端的导入导出
导入: 读取excel的内容 整理成数组的形式传给后端
导出: 后端返回数组 由前端生成excel 并下载

安装依赖

• ExcelJs

npm i ExcelJs
ExcelJs 中文文档 : https://github.com/exceljs/exceljs/blob/master/README_zh.md

• Angular

这里用到的前端框架是Angular + Angular Material

代码实现

导入

html 先创建一个点击可以导入excel 文件的按钮

<!-- 这里限制了仅读取excel文件 -->
<input type="file" #fileUpload style="display: none"
  accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" />
<button mat-raised-button color="primary" (click)="import" type="file">Import</button>

使用button 模拟点击input 选取文件后使用 ExcelJs 读取文件

@ViewChild('fileUpload', { static: false }) fileUpload: ElementRef;

import() {
  const fileUpload = this.fileUpload.nativeElement;
  fileUpload.value = ''; // clear fileUpload
  fileUpload.onchange = (e) => {
    for (let index = 0; index < fileUpload.files.length; index++) {
      const file = fileUpload.files[index];
      this.readfile(file);
    }
  };
  fileUpload.click();
}

async readfile(file: File) {
  const fileReader = new FileReader();
  // 这里需要把文件转换成 ArrayBuffer 类型 给ExcelJS
  fileReader.readAsArrayBuffer(file);
  fileReader.onload = (e) => {
    const workbook = new ExcelJS.Workbook();
    // load 方法读取 ArrayBuffer 类型 具体参考文档
    workbook.xlsx.load(e.target.result as ArrayBuffer).then(() => {
      const sheet = workbook.getWorksheet('Sheet1'); // 这里只读取了Sheet1的内容
      const imputData = [];
      sheet.eachRow((row, idx) => { // Sheet1的内容 按row 读取
        if (row.values && idx > 1) {
          imputData.push({
            row1: row.values[1] ? row.values[1] : '',
            row2: row.values[2] ? row.values[2] : '',
            row3: row.values[3] ? row.values[3] : '',
          });
        }
      });
      // 这里 imputData 就是 Sheet1中的内容了
      console.log(imputData);
    });
  };
}

导出

导出从后端的查询接口获取到的数组

  export() {
    this.getExportList().subscribe((list) => {
        if (list) {
            const exportColumn = [
              'Column1',
              'Column2',
              'Column3',
            ];

            const workbook = new ExcelJS.Workbook();  // new ExcelJS 
            const sheet = workbook.addWorksheet('sheet');  // new sheet 
            sheet.addRow(exportColumn); // 写入表头作为第一行

            // 把list 的内容写入
            list.map((item) => {
              const list = [
                item.Row1 ? item.Row1.toString() : '',
                item.Row2 ? item.Row2.toString() : '',
                item.Row3 ? item.Row3.toString() : '',
              ];
              sheet.addRow(list);
            });

            // writeBuffer 把写好的excel 转换成 ArrayBuffer 类型
            workbook.xlsx.writeBuffer().then((data) => {
              const link = document.createElement('a');
              // Blob 实现下载excel
              const blob: Blob = new Blob([data], {
                type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8',
              });
              link.href = window.URL.createObjectURL(blob);
              link.download = 'export.xlsx';
              link.click();
            });
          }
    });
  }

这样就完成一个纯前端的 导入导出功能

后记 :
完成这个功能最花费最多时间的地方主要是文件的类型转换,导入和导出都需要把文件转成 ArrayBuffer 类型

导入功能 ExcelJs 有3种读取文件的方式 我最终选择了 把选中的文件转换成ArrayBuffer 然后用 load()的方式读取

导出功能 Blob 的入参需要 ArrayBuffer 类型,于是需要把创建的文件使用writeBuffer()读出来

标签：fileUpload,const,ExcelJs,导出,导入,sheet,row
来源： https://www.cnblogs.com/nhxz001/p/16457956.html