vue+element-ui+xlsx实现前端解析xlsx文件内容

一、目的：在vue+element-ui中实现解析上传的文件内容，优化用户体验

二、安装xlsx包：npm install xlsx

三、导入xlsx:import XLSX from 'xlsx'

四、开始使用

校验代码：

beforeUpLoad(file) {
  let _this = this;
  // 使返回的值变成Promise对象，如果校验不通过，则reject，校验通过，则resolve
  return new Promise(function(resolve, reject){
    // readExcel方法也使用了Promise异步转同步，此处使用then对返回值进行处理
    _this.readExcel(file).then(result => {// 此时标识校验成功，为resolve返回
    if (result) resolve(result);
    })
  });
},

解析xlsx文件

readExcel(file) {// 解析Excel
  let _this = this;
  return new Promise(function(resolve, reject){// 返回Promise对象
    const reader = new FileReader();
    reader.onload = (e) => {// 异步执行
      try {
        // 以二进制流方式读取得到整份excel表格对象
        let data = e.target.result,workbook = XLSX.read(data, {type: 'binary'});
        let batteryArr = [];
        for (let item in workbook.SheetNames){
          let SheetName = workbook.SheetNames[item]
          let sheetInfos = workbook.Sheets[SheetName];
          for (let battery in sheetInfos){
            if (battery!='!ref'){
              batteryArr.push(sheetInfos[battery])
            }
          }
        }
        if (batteryArr.length>_this.upLoadNumber){
          app.alert("上传电芯数量不能超过6条");
          resolve(false);
        }else {
          resolve(true);
        }
      } catch (e) {
        reject(e.message);
      }
    };
    reader.readAsBinaryString(file);
  });
},

五、总结

1、readExcel中的load相关内容为异步执行，并不会阻塞，所以此方法很快就执行结束了。

2、readExcel中的load实现同步的方法：结合element-ui的before-upload返回的内容，如图：

通过load返回的result来判断是否执行resolve()方法