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，实现效果图