vue2使用xlsx在线解析excel实现

1，引入对应的依赖

npm install xlsx复制

2，导入对应的依赖包

3，上传组件方法编码

<el-upload
          class="upload-demo"
          ref="upload"
          action
          :limit="1"
          accept=".xlsx, .xls"
          :show-file-list="true"
          :auto-upload="false"
        >
          <el-button slot="trigger" size="small" type="primary">上传台账数据</el-button>
          <el-button
            style="margin-left: 10px;"
            size="small"
            type="success"
            @click="submitUpload"
          >解析xlsx</el-button>
          <!-- <div slot="tip" class="el-upload__tip">仅允许导入xls、xlsx格式文件。</div> -->
        </el-upload>复制

4，对应的提交方法

  // 解析excel
    submitUpload() {
      let ev = Object.values(this.$refs.upload.uploadFiles)[0];
      this.selectFileChange(ev);
      this.$refs.upload.submit();
    },复制

5，解析方法实现，包含excel有特殊字符处理

// 导入excel并解析
 
    readFile(file) {
 
      //文件读取
 
      return new Promise(resolve => {
 
        let reader = new FileReader();
 
        reader.readAsBinaryString(file); //以二进制的方式读取
 
        reader.onload = ev => {
 
          resolve(ev.target.result);
 
        };
 
      });
 
    },
 
    async selectFileChange(ev) {
 
      let file = ev.raw;
 
      if (file.name.indexOf("xlsx") == -1 || file.name.indexOf("xls") == -1) {
 
        this.$message({
 
          message: "请选择xlsx、xls格式文件",
 
          type: "warning"
 
        });
 
        return;
 
      }
 
      if (!file) {
 
        this.$message({
 
          message: "文件导入失败",
 
          type: "warning"
 
        });
 
        return;
 
      } else {
 
        let data = await this.readFile(file);
 
        let workbook = XLSX.read(data, { type: "binary", cellDates: true }); //解析二进制格式数据
 
        // console.log('二进制数据的解析:')
 
        // console.log(workbook)
 
        let worksheet = workbook.Sheets[workbook.SheetNames[0]]; //获取第一个Sheet
 
        let result = XLSX.utils.sheet_to_json(worksheet); //json数据格式
 
        console.log(result);
 
        for (let item in result) {
 
          let rowTable = {};
 
          //这里的rowtable的属性名注意要与上面的表格的prop一致
 
          // sheetArray的属性名与上传的表格的列名一致
 
          rowTable.plaOrderArea = result[item].下单地区;
 
          rowTable.plaOrderTime = result[item].下单时间;
 
          rowTable.needWorkshop = result[item].需求车间;
 
          rowTable.needPerson = result[item].申请人;
 
          rowTable.packWay = result[item].打包方式;
 
          rowTable.purOrderNum = result[item].采购订单号;
 
          rowTable.lineItemNum = result[item].行项目;
 
          rowTable.purOrderItem = result[item]["采购订单号+行项目"];
 
          rowTable.section = result[item].工段;
 
          rowTable.createLine = result[item].线别;
 
          rowTable.innerOrderNum = result[item].内部订单号;
 
          rowTable.equName = result[item].设备名称;
 
          rowTable.equDesc = result[item].设备描述;
 
          rowTable.equLength = result[item]["设备尺寸长/mm"];
 
          rowTable.equHeight = result[item]["设备尺寸高/mm"];
 
          rowTable.equWidth = result[item]["设备尺寸宽/mm"];
 
          rowTable.packLength = result[item]["木箱包装尺寸长/mm"];
 
          rowTable.packHeight = result[item]["木箱包装尺寸高/mm"];
 
          rowTable.packWidth = result[item]["木箱包装尺寸宽/mm"];
 
          rowTable.packNum = result[item]["包装数量/m3"];
 
          rowTable.realLength = result[item]["实际包装尺寸长/mm"];
 
          rowTable.realHeight = result[item]["实际包装尺寸高/mm"];
 
          rowTable.realWidth = result[item]["实际包装尺寸宽/mm"];
 
          rowTable.realNum = result[item]["实际包装数量/m3"];
 
          rowTable.weight = result[item]["重量/kg"];
 
          rowTable.equNum = result[item].设备数量;
 
          rowTable.surveyor = result[item].车间测量人;
 
          rowTable.planReceiver = result[item].计划收料确认人;
 
          rowTable.qualityLeader = result[item].品质负责人;
 
          rowTable.projectFollower = result[item].记录录入人;
 
          rowTable.packTime = result[item].打包日期;
 
          rowTable.packCompany = result[item].打包公司;
 
          rowTable.compConformer = result[item].打包公司确认人;
 
          this.ruleForm.listTable.push(rowTable);
 
        }
 
      }
 
    }复制

6，实现效果图