vue 利用 js-xslx 读取 excel 表格文件

文件读取~~~
表格数据

// template
// 文件选择，或者使用原生 imput type 为 file  
<el-upload
  action="/"
  :on-change='onChange'
  :auto-upload='false'
  :show-file-list="false"
  accept=".xls, .xlsx" 
>
  <el-button size="small" type="primary">选择文件</el-button>
  <div slot="tip" v-if='fileData'>{{ fileData.name }}</div>
</el-upload>
<el-table :data="outputs">
  <el-table-column label="姓名" prop='name'></el-table-column>
  <el-table-column label="年龄" prop='age'></el-table-column>
</el-table>
// js
data() {
  return {
    outputs: [], // 保存读取出来的数据
    fileData:'', // 保存选择的文件
  };
},
methods: {
// 文件选择回调
  onChange(file,fileList){
    this.fileData = file // 保存当前选择文件
    this.readExcel() // 调用读取数据的方法
  },
// 读取数据
  readExcel(e) {
    let that = this;
    const files = that.fileData;
    console.log(files);
    if (!files) {
      //如果没有文件
      return false;
    } else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {
      this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
      return false;
    }
    const fileReader = new FileReader();
    fileReader.onload = ev => {
      try {
        const data = ev.target.result;
        // console.log(data)
        const workbook = XLSX.read(data, {
          type: "binary"
        });
        console.log(workbook.SheetNames)
        const wsname = workbook.SheetNames[0]; //取第一张表
        const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
        console.log(ws);
        that.outputs = []; //清空接收数据
        for (var i = 0; i < ws.length; i++) {
          var sheetData = {
            // 键名为绑定 el 表格的关键字，值则是 ws[i][对应表头名]
            name:ws[i]['姓名'],
            age:ws[i]['年龄'],
          };
          that.outputs.push(sheetData);
        }
        this.$refs.upload.value = "";
      } catch (e) {
        return false;
      }
    };
// 如果为原生 input 则应是 files[0]
    fileReader.readAsBinaryString(files.raw);
  }
}