关于前端:Vue实现Excel预览功能

前言：

我的项目中常常能遇到要求预览 excel 文件的需要，上面分享一下罕用的办法以及可能遇到的问题。

应用场景：

通过解析 excel 性能，实现 PDF 导入时的预览

首先咱们用到了 XLSX（sheetJs） 这个库来解决 Excel 类型的文件

地址：

https://docs.sheetjs.com/

https://www.npmjs.com/package/xlsx

反对大部分的古代浏览器版本

下载：npm i xlsx

首先咱们获取一 Excel 类型的文件。

这里我间接用了 el-upload 组件返回的文件

而后应用 FileReader 读取文件，注册初始化 onload 办法，并且在其 onload 办法中应用 xlsx 库解决文件;

首先应用 xlsx 的 read 办法，配置解决的详情。

    const workbook = XLSX.read(data, {
      type: "binary",
      cellText: false,
      cellDates: true,
    });

再轮询读取文件

    for (let sheet in workbook.Sheets) {
      // 循环读取每个文件
      const header = XLSX.utils.sheet_to_json(workbook.Sheets[sheet], {header: 1,});

      const sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets[sheet],
        // 配置单元的数据转换方法，dateNF 不失效
        {raw: true, cellDates: true, dateNF: "yyyy/mm/dd"}
      );

      // 若以后 sheet 没有数据，则 continue
      if (sheetArray.length == 0) {continue;}
      this.tableHeader = header[0];
      this.handleNetX(sheetArray, header[0]);
    }
  } catch (e) {this.$message.warning("上传失败");
  }

留神 sheet_to_json 办法中此时 cellDates 配置为 true 之后，如果 excel 文件内的数据类型为工夫，会被转成 Date 格局。

官网文档中容许配置 dateNF 来进行工夫格式化，然而理论应用起来并没有成果。

所以针对工夫格局的解决，笔者这里间接转为 Date 格局，在后续过程中进行了手动解决。

咱们初始化 load 办法后，将 excel 文件源文件，转为 bolb 格局，在塞给 fileReader.readAsBinaryString，进行文件解决办法的执行。

      const blob = new Blob([file.raw]);
      fileReader.readAsBinaryString(blob);

最初轮询 sheetArray 来进行数据的二次解决，最初失去前端能够应用的 Array 类型的文件，展现在页面中或者展现在表单中。

解决工夫的办法写的比较简单，次要就是判断了 Date 的 object 类型，来格式化日期类型

    handleNetX(sheetArray, header) {const totalTable = [];
      for (let index in sheetArray) {let row = {};
        header.map(index1 => {const tempKey = this.mapTableTitle[index1];

          if (typeof sheetArray[index][index1] === "object") {row[tempKey] = this.handleExcelDate(sheetArray[index][index1]);
          } else {row[tempKey] = sheetArray[index][index1];
          }
        });
        totalTable.push(row);
      }
      this.tableData = totalTable;
    },


    handleExcelDate(date) {if (!date) {return;}
      return formatDate(date.getTime(), "YYYY/MM/DD");
    },

    async handleChangePre(file) {
      this.file = file;
      this.showResult = false;

      const fileReader = new FileReader();

      fileReader.onload = ev => {
        try {
          const data = ev.target.result;

          const workbook = XLSX.read(data, {
            type: "binary",
            cellText: false,
            cellDates: true,
          });

          for (let sheet in workbook.Sheets) {
            // 循环读取每个文件
            const header = XLSX.utils.sheet_to_json(workbook.Sheets[sheet], {header: 1,});

            const sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets[sheet],
              {raw: true, cellDates: true, dateNF: "yyyy/mm/dd"}
            );

            // 若以后 sheet 没有数据，则 continue
            if (sheetArray.length == 0) {continue;}
            this.tableHeader = header[0];
            console.log(sheetArray, "sheetArray");
            this.handleNetX(sheetArray, header[0]);
          }
        } catch (e) {this.$message.warning("上传失败");
        }
      };
      const blob = new Blob([file.raw]);
      fileReader.readAsBinaryString(blob);
    },

关于前端:Vue实现Excel预览功能

Vue 实现 Excel 预览性能

具体应用：

工夫格局解决

代码总结：