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

文件读取~~~
表格数据

excel读取数据.jpg

// template
// 文件选择，或者使用原生 imput type 为 file  

  选择文件
  
{{ fileData.name }}


  
  

// 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);
  }
}