使用xlsx实现Excel导入

需求

• 实现在系统里批量导入数据，通过上传一个excel文件，前端将文件处理为json数据发送给后端。（最好与后端定义好上传的文件模板，方便处理数据）

实现

• 使用xlsx；
• xlsx的github地址：https://github.com/SheetJS/sheetjs；
• 适用于js、react、vue等项目。

代码

• 实现导入Excel方法

function importsExcel(file: any) {
  //使用promise导入
  return new Promise((resolve, reject) => {
    // 获取上传的文件对象
    const { files } = file.target; //获取里面的所有文件
    // 通过FileReader对象读取文件
    const fileReader = new FileReader();

    fileReader.onload = (event) => {
      //异步操作  excel文件加载完成以后触发
      try {
        const { result } = event.target as any;
        // 以二进制流方式读取得到整份excel表格对象
        const workbook = XLSX.read(result, { type: "binary" });
        let data: any = []; // 存储获取到的数据
        // 遍历每张工作表进行读取
        for (const sheet in workbook.Sheets) {
          if (workbook.Sheets.hasOwnProperty(sheet)) {
            data = data.concat(
              // 将工作表转换为json数据
              XLSX.utils.sheet_to_json(workbook.Sheets[sheet])
            );
          }
        }
        resolve(data); //导出数据
      } catch (e) {
        // 这里可以抛出文件类型错误不正确的相关提示
        reject("失败"); //导出失败
      }
    };
    // 以二进制方式打开文件
    fileReader.readAsBinaryString(files[0]);
  });
}

• 页面功能调用

    <input
        type="file"
        accept=".xls,.xlsx"
        onChange={(e) => {
          importsExcel(e).then(
            function (data) {
              console.log(data);
            },
            function (data) {
              console.log(data);
            }
          );
        }}
      />