vue前端解析excel

    //导入确认
//uploadType 弹框复用,1、2为两个不同按钮,导入不同excel
    submitFileForm(){
      if (this.excelList.length === 0) {
        this.$message.warning("请选择文件");
        return;
      }
      if (this.excelList.length > 1) {
        this.$message.warning("每次只能上传一个文件");
        return;
      }
      let formData = new FormData();
      this.excelList.forEach((item) => {
        formData.append("file", item.raw);
        console.log(item.raw);
      });
      let loadingInstance = Loading.service({
        lock: true, //lock的修改符--默认是false
        text: "正在进行解析,请耐心等待", //显示在加载图标下方的加载文案
        spinner: "el-icon-loading", //自定义加载图标类名
        background: "rgba(0, 0, 0, 0.7)", //遮罩层颜色
        target: document.querySelector("#futureTransferDialog"), //loadin覆盖的dom元素节点
      });
      //解析excel文件
      const _file = formData.get("file");
        const fileReader = new FileReader();
        fileReader.onload = (ev) => {
          try {
            const data = ev.target.result;
            const workbook = XLSX.read(data, {
              type: 'binary'
            });
            for (let sheet in workbook.Sheets) {
              //循环读取每个文件
              if(this.uploadType ==='1'){
                var sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);
              }
              if(this.uploadType === '2'){
                //因为这个表的第一行不是标题,所以导入从第2行开始
                var sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets[sheet], {range:1,defval:''});
              }
              //若当前sheet没有数据,则continue
              if(sheetArray.length == 0){
                continue;
              }
              console.log("读取文件");
              console.log(sheetArray);
              this.importData=[];
              
              if(this.uploadType === '1'){
              //导入
              for(let item in sheetArray){
                let rowTable = {};
                //这里的rowTable的属性名注意要与上面表格的prop一致
                //sheetArray的属性名与上传的表格的列名一致
                //只获取列名为CONT的列
                rowTable = sheetArray[item].CONT;
                console.log(rowTable);
                this.importData.push(rowTable)
              }             
              //上传
              uploadFile(this.importData,this.queryCheckParams.useId)
                .then((res) => {
                  loadingInstance.close();
                  console.log(res.msg);
                  this.$message({
                    type: "success",
                    message: "比对完成!",
                  });
                  this.query = {};
                  this.onLoad(this.page, {});
                })
                .then(() => {
                  console.log("关闭  上传");
                  this.excelList = [];
                  this.upload.open = false;
                })
                .finally(() => {
                  loadingInstance.close();
                });
              }
              else if (this.uploadType === '2'){
                //导入
                for(let item in sheetArray){
                let rowTable = {};
                //这里的rowTable的属性名注意要与上面表格的prop一致
                //sheetArray的属性名与上传的表格的列名一致
                //只获取列名为CONT的列
                rowTable.bookingNo = sheetArray[item].BookingNumber;
                rowTable.billNo = sheetArray[item].BOLNo;
                console.log(rowTable);
                this.importData.push(rowTable)
              }  
              //上传
              uploadWyFile(this.importData,this.queryCheckParams.useId)
                .then((res) => {
                  loadingInstance.close();
                  console.log(res.msg);
                  this.$message({
                    type: "success",
                    message: "导入完成!",
                  });
                  this.query = {};
                  this.onLoad(this.page, {});
                })
                .then(() => {
                  console.log("关闭  上传");
                  this.excelList = [];
                  this.upload.open = false;
                })
                .finally(() => {
                  loadingInstance.close();
                });
              }

            }
          } catch (e) {
            this.$message.warning('文件类型不正确!');
          }
        };
        fileReader.readAsBinaryString(_file);
    },

你可能感兴趣的:(前端知识积累,vue.js,前端,elementui,excel)