VUE中导入excel文件

实现的效果以下图

参考文献网址: https://blog.csdn.net/qq_3900...
https://blog.csdn.net/liyi_mo...

安装依赖

npm install xlsx --save

引入

import XLSX from 'xlsx'
Vue.prototype.XLSX = XLSX

结构

<el-dialog title="入库" class="dialogAdd" width="600px"  :visible.sync="gmDr"  @close="gmDrClose" >
      <el-form :model="gmDrform" :rules="addFormRules" ref="gmDrform" style="margin-right: 20px;" label-position="right" label-width="100px" size="small">
      
        <el-form-item label="入库日期"  prop="storageTime">
          <el-date-picker
            v-model="gmDrform.storageTime"
            type="datetime"
            placeholder="选择日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            @change="gmDrTimeChange"
          ></el-date-picker>
        </el-form-item>

            <el-row style="width:100px;padding-right:10px">
                 <el-button  @click="importExcel" size="mini" style=" float:right">导入</el-button>
           </el-row> 
          <input type="file" ref="uploadExcel" v-show="false" accept=".xls,.xlsx" @change="readExcel">

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="gmDr = false">取 消</el-button>
        <el-button  size="mini" type="primary" @click="gmDrSure">确 定</el-button>
      </div>
    </el-dialog>

data中的数据

gmDrform:{storageTime:""},//光猫导入
gmDr:false,
arrList:[],

methods中

gmDrClick(){ // 获取当前时间,并赋值给入库日期
    this.gmDr=true
    this.gmDrform.storageTime=this.nowTime()
  },

  gmDrTimeChange(val){//入库日期发生变化,保存到gmDrform.storageTime中
    this.gmDrform.storageTime=val
  },

  gmDrClose(){//关闭模态框,清除数据
      this.$refs.gmDrform.resetFields();
  },

importExcel() {
    this.dialogChangePwdVisible = true;
    this.$refs.uploadExcel.click();
        },
readExcel(e) {
    const files = e.target.files;
    if (files.length <= 0) {
        //若是没有文件名
        return false;
    }
    const fileReader = new FileReader();
    fileReader.onload = ev => {
      try {
        const data = ev.target.result;
        const workbook = XLSX.read(data, {
          type: "binary"
            
        });
      const wsname = workbook.SheetNames[0]; //取第一张表
      const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //获取到XLSX表格中的数据,并生成json格式的数据类型
      // console.log(ws,666);
      let arr = [];
      ws.forEach((value, index, ws) => {
        arr.push({
            typeNo: ws[index]["光猫型号"] + "",
            boxNo: ws[index]["光猫箱码"] + "",
            snNos: ws[index]["光猫SN码"] + "",
            storageTime:this.gmDrform.storageTime+"",
            name:"光猫",
            category:"光猫",
            remarks:"",

        });
      })
      for(let i in arr){
          let item = arr[i]
          for(let key in item){
            // console.log(item[key]);
            if(item[key] == "undefined"){
              delete item[key] 
            }
          }   
          }       
          this.arrList=arr//给arrList赋值,肯定导入时传入
    } catch (e) {
        return false;
      }
    };
    fileReader.readAsBinaryString(files[0]);
},

  gmDrSure(){//肯定导入
      let headers={//axios发送请求时,须要配置请求头
            headers:{ 'Accept': 'application/json','Content-Type': 'application/json' }  
            }
      this.startLoading();
      let url = this.config.httpHeadUrl + "/api/modem/admin/saveBatchModem";
      this.$axios.post(url, JSON.stringify(this.arrList),headers ).then(res => {
      this.$message.success("导入成功！");
      this.gmDr = false;
      this.handleCurrentChange(1);
      this.$refs.uploadExcel.value = "";//把以前导入的清空
      if(res.data.flag==0){
        this.$message("导入表头不正确")
        this.gmDr =true
      }
    },(error) => {
        this.$refs.uploadExcel.value = "";//把以前导入的清空
    })
},