Vue中读取上传excel表并读取excel表的数据

• 安装xlsx插件

---

// 安装插件
npm install xlsx --save

// 在vue中导入XLSX
import XLSX from 'xlsx'

-

这里使用 element-ui 的上传组件

关闭默认上传的操作，在on-change事件上绑定importExcel上传函数
如果用传统的input上传组件也可以

ref="upload"
action="/"
:show-file-list="false"
:on-change="importExcel"
:auto-upload="false">

  上传文件

上传文件的方法importExcel

importExcel(file) {

  // let file = file.files[0] // 使用传统的input方法需要加上这一步
  let self = this;
  const types = file.name.split(".")[1];
  const fileType = ["xlsx", "xlc", "xlm", "xls", "xlt", "xlw", "csv"].some(
    item => item === types
  );
  if (!fileType) {
    alert("格式错误！请重新选择");
    return;
  }
  this.file2Xce(file).then(tab => {
    if (tab && tab.length > 0) {
      this.tab = tab;
      if (this.tab.length != 0) {
        this.xlscList = [];
        this.tab[0].sheet.forEach(item => {
          if (item.indexOf("C") != -1) {
            let inputInfo = item.split("'");
            if (inputInfo.length == 2) {
              self.xlscList.push(inputInfo[1]);
            }
          }
        });
      }
      if (this.xlscList.length != 0) {
        this.setInputToForm();
      }
      //  this.xlscListthis.tab[0].sheet.filter(item=>{if(item.findIndex('C')!=-1){
      //       return item
      //  }})
      // this.xlscList = tabArray.filter(item => item.includes('C'))
    }
  });
},

setInputToForm(){

  if (this.xlscList.length > 13) {
    this.form.safetyPointCheckDTO.sensitiveInfoCollection = this.xlscList[1],
    this.form.safetyPointCheckDTO.dataTransSecurity = this.xlscList[2],
    this.form.safetyPointCheckDTO.dataLocalStorageSecurity = this.xlscList[1],
    this.form.safetyPointCheckDTO.sensitiveInfoUse = this.xlscList[1],
    this.form.safetyPointCheckDTO.permissionList = this.xlscList[1],
    this.form.safetyPointCheckDTO.dynamicLoadFunction = this.xlscList[1],
    this.form.safetyPointCheckDTO.updateFunction = this.xlscList[1],
    this.form.safetyPointCheckDTO.classLoaderInjectFunction = this.xlscList[1],
    this.form.safetyPointCheckDTO.logSecurity = this.xlscList[1],
    this.form.safetyPointCheckDTO.componentSecurity = this.xlscList[1],
    this.form.safetyPointCheckDTO.encryDecryAlgorithm = this.xlscList[1],
    this.form.safetyPointCheckDTO.databaseSecurity = this.xlscList[1],
    this.form.safetyPointCheckDTO.staticCodeCheck = this.xlscList[1]
  }else{
    this.$message({
      message: '上传格式不對',
      type: 'warning'
    })
  }

},

file2Xce(file) {

  return new Promise(function(resolve, reject) {
    const reader = new FileReader();
    reader.onload = function(e) {
      const data = e.target.result;
      this.wb = XLSX.read(data, {
        type: "binary"
      });
      const result = [];
      this.wb.SheetNames.forEach(sheetName => {
        result.push({
          sheetName: sheetName,
          sheet: XLSX.utils.sheet_to_formulae(this.wb.Sheets[sheetName])
        });
      });
      resolve(result);
    };
    reader.readAsBinaryString(file.raw);
    // reader.readAsBinaryString(file) // 传统input方法
  });
},