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

• 安装xlsx插件

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

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

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

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

<input type="file" @change="importExcel($event.target)" />
<el-upload
    ref="upload"
    action="/"
    :show-file-list="false"
    :on-change="importExcel"
    :auto-upload="false">
    <el-button
      slot="trigger"
      icon="el-icon-upload"
      size="small"
      type="primary">
      上传文件
    </el-button>
</el-upload>

上传文件的方法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方法
      });
    },