vue中解析上传excle文件内容

在项目中上传excel文件是很常见的，那如何解析其内容呢，一起来看看吧：

• 按钮

  <input type="file" name="file" id="file" accept=".xls, .xlsx" background="none" @change="uploadFile"/>请上传文件
  

• 事件

  async uploadFile(event) {
    const file = event.target.files[0];
    const types = file.name.split(".")[1];
    const fileType = ["xlsx", "xls"].some((item) => item === types);
    if (!fileType) {
      return this.$snackbar().showError("文件类型错误，请重新选择");   //注意此处的$snackbar()是vuetify框架中的组件，此处改为自己使用的组件即可
    }
    let fileList = [];
    let tabJson = await this.file2Xce(file);
    if (tabJson && tabJson.length > 0) {
      this.xlsxJson = tabJson;
      fileList = this.xlsxJson[0].sheet;
      console.log(fileList);
      event.target.value = ""; // 解决上传相同附件只传一次问题，可以参考博文：https://blog.csdn.net/weixin_43363871/article/details/106716737
    }
  },
  file2Xce(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = function (e) {
        const data = e.target.result;
        this.wb = XLSX.read(data, {
          type: "binary",
        });
        const result = [];
        const sheet2JSONOpts = {
          defval: "", //给defval赋值为空的字符串
        };
        this.wb.SheetNames.forEach((sheetName) => {
          result.push({
            sheetName: sheetName,
            sheet: XLSX.utils.sheet_to_json(
              this.wb.Sheets[sheetName],
              sheet2JSONOpts     //当excel内容为空时若不加此属性没有相应的字段，可以取消试试效果
            ),
          });
        });
        resolve(result);
      };
      reader.readAsBinaryString(file);
    });
  },
  

• execle内容

  

• 解析结果