Vue + Element UI 使用SheetJS解析上传的xls或xlsx文件表格

SheetJS文档：https://github.com/SheetJS/sheetjs#installation

中文版（距上次更新已经挺久）：https://github.com/rockboom/SheetJS-docs-zh-CN

需求一：客户点击上传对应格式的生产计划表格文件，点击确定后导入生产计划。
在这里插入图片描述

1.下载
在控制台运行以下命令

npm install xlsx

在这里插入图片描述
2.引入
在页面引入xlsx

3、前端代码

4.JS代码

lodingExcelDate() {
  let file = this.$refs["importfile"].files[0];
  //获取最后一个.的位置
  var index = file.name.lastIndexOf(".");//①
  //获取后缀
  var ext = file.name.substr(index + 1);
  if (ext == "xls" || ext == "xlsx") {

    let reader = new FileReader();
    let that = this;
    let mfgorder = []; //excel解析出来的生产计划
    reader.onload = function (e) {
      var data = new Uint8Array(e.target.result);
      var workbook = XLSX.read(data, {//②
        type: 'array',
        cellText: false,

      });
      for (let sheet in workbook.Sheets) {//③
        //获取当前选中的产线
        let line = that.lineList.find(item => {
          return item.lineId == that.lineId
        })
        //判断excel中是否存在对应产线信息
        if (!workbook.Sheets.hasOwnProperty(line.lineName)) {//④
          that.$message({
            message: "Excel中无对应产线的生产计划！",
            type: 'error'
          });
          return;
        }
        //只解析选中的产线的生产计划
        if (sheet.indexOf(line.lineName)!=-1) {//⑤
          //解析Excel
          mfgorder = XLSX.utils.sheet_to_json(workbook.Sheets[sheet], {//⑥
            raw: false,
            range: 2
          })
          //处理合并单元格的字段问题 设置生产订单等字段的键
          for (let mfg of mfgorder) {//⑦
            for (let key in mfg) {
              switch (key) {
                case "__EMPTY":
                  delete mfg[key]
                  break;
                case "__EMPTY_1":
                  mfg["mfgorderCode"] = mfg[key];
                  delete mfg[key]
                  break;
                case "__EMPTY_2":
                  mfg["mfgplanCode"] = mfg[key];
                  delete mfg[key]
                  break;
                case "__EMPTY_3":
                  mfg["mfgorderUser"] = mfg[key];
                  delete mfg[key]
                  break;
                case "__EMPTY_4":
                  mfg["materialId"] = mfg[key];
                  delete mfg[key]
                  break;
                case "__EMPTY_5":
                  mfg["mfgorderSmt"] = mfg[key];
                  delete mfg[key]
                  break;
                case "__EMPTY_6":
                  mfg["mfgorderDate"] = mfg[key];
                  delete mfg[key]
                  break;
                case "__EMPTY_7":
                  mfg["mfgorderOut"] = mfg[key];
                  delete mfg[key]
                  break;
                case "__EMPTY_8":
                  mfg["planQty"] = mfg[key];
                  delete mfg[key]
                  break;
                case "__EMPTY_9":
                  delete mfg[key]
                  break;
              }
            }
            mfg.lineId = that.lineId;
          }
          console.log(mfgorder)
          that.mfgorderList = mfgorder;
          break;
        }
      }
    }
    reader.readAsArrayBuffer(file);
  } else {
    this.$message({
      message: "请选择正确的EXCEL文件",
      type: 'error'
    });
  }
},

5.解析结果
在这里插入图片描述

附：
后端接取表格数据数据结构：List<Map<String, String>> excelData
日期处理代码：DateUtil.date((Long.parseLong(key) - 25569) * 86400 * 1000 - 28800000)
①获取后缀代码可以合并为

var ext = file.name.substr(file.name.lastIndexOf(".") + 1);

②workbook 为解析出的整个表格文档
③workbook.Sheets为表格底下的全部工作表
④hasOwnProperty 在这里插入图片描述
⑤indexOf

⑥range: 2 表示第3行数据作为key，第3行后的作为value
⑦例如当2、3行合并时当前行为第二行第三行为空，当key和value为空不解析当前格，当key为空value不为空会读取value，key给默认顺序：__EMPTY、__EMPTY_1、__EMPTY_2、__EMPTY_3、__EMPTY_4···
SheetJS文档：https://github.com/SheetJS/sheetjs#installation
⑧value有多少行，解析出的数组就有多少个元素

中文版（距上次更新已很久）：https://github.com/rockboom/SheetJS-docs-zh-CN
⑨解析出的日期为数字原因
在这里插入图片描述
⑩文档表格解析JS代码模板在Browser drag-and-drop折叠块

需求二：客户点击上传对应格式的模块表格文件，点击确定后导入模块数据。
在这里插入图片描述
1.前端代码

2.JS代码

lodingExcelDate() {
  letfile = this.$refs["importfile"].files[0];
  let reader = new FileReader();
  let that = this;
  let packageRecord = [];
  reader.onload = function (e) {
    var data = new Uint8Array(e.target.result);
    var workbook = XLSX.read(data, {
      type: 'array'
    });
    for (let sheet in workbook.Sheets) {
      if (workbook.Sheets.hasOwnProperty(sheet)) {
        let head = XLSX.utils.sheet_to_json(workbook.Sheets[sheet], {//②
          raw: false,
          range: 'A1:L1',
          header: 'A'
        })
        if (head[0].D != 'SN' && head[0].E != "MAC") {
          that.$message({
            message: "请选择正确的模块信息文件",
            type: 'error'
          });
          return;
        }

        packageRecord = XLSX.utils.sheet_to_json(workbook.Sheets[sheet], {
          raw: false,
          range: 1,
          header: "A"
        })
        //只取D E两列的值
        for (let record of packageRecord) {
          that.packageRecordList.push({
            "barcodeModule": record.D,
            "barcodeMac": record.E,
            "recordStatus": ''
          })
        }
      }
      break;
    }
  }
  reader.readAsArrayBuffer(file);
},