用 FileReader 对象 读取Excel表格并渲染

读取Excel表格并渲染

html页面 

<el-button type="primary" size="mini" @click="importExcel">导入</el-button>
<input type="file" v-show="false"
       ref="input_file"
       accept=".xlsx"
       @change="importF" />

js事件，需要结合XLSX

import XLSX from 'xlsx/dist/xlsx.full.min'

importExcel () {
    this.$refs.input_file.click();
},
importF (evt) {
      let _this = this;
      let rABS = false;
      let obj = evt.target;
      let arr = evt.target.files[0].name.split('.');
      let len = evt.target.files[0].name.split('.').length;
      let typeName = arr[len - 1];
      if (typeName != 'xlsx') {
        this.$message({
          type: 'warning',
          message: '请上传.xlsx类型文件'
        });
        return;
      }
      if (!obj.files) {
        return;
      }
      let f = obj.files[0];
      let reader = new FileReader();
      reader.onload = function (e) {
        
        let data = e.target.result;
        let wb;
        if (rABS) {
          wb = XLSX.read(data, { type: 'binary' });
        } else {
          let arr = _this.fixdata(data);
          wb = XLSX.read(btoa(arr), { type: 'base64' })
        }
        let deviceTagList = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
        
 
        _this.$message({
          type: 'success',
          message: '文件导入成功'
        });
        _this.$refs.input_file.value = '';
      };
      if (rABS) reader.readAsBinaryString(f);
      else reader.readAsArrayBuffer(f);
    }