vue導入excel

第一步
npm install -S file-saver xlsx
npm install -D script-loader
第二步

<div>
<input type="file" @change="ImpData(this)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/>
       <el-table ref="multipleTable" :data="excelData" tooltip-effect="dark" border="true" max-height="300" style="width:900px">
        <el-table-column  type="selection"  width="40">
        </el-table-column>
        <el-table-column prop="name" label="名稱" width="120"  >  </el-table-column>
        <el-table-column prop="unit" label="單位" width="120"  >  </el-table-column>
        <el-table-column prop="use" label="用途"> </el-table-column>
        <el-table-column label="操作" width="170">
          <template slot-scope="scope">
            <el-button  size="mini" @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
            <el-button size="mini" type="danger"  @click.native.prevent="handleDelete(scope.row,excelData)">刪除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

第三步

export default {
name: 'app',
data(){
	return{
		excelData:[]
	}
},
methods:{
	ImpData(obj){
      let _this = this;
      this.file = event.currentTarget.files[0];  
      var rABS = false; //是否將文件讀取爲二進制字符串
      var f = this.file;
      var reader = new FileReader();
      FileReader.prototype.readAsBinaryString = function(f) {
      var binary = "";
      var wb; //讀取完成的數據
      var outdata;
      var reader = new FileReader();
      reader.onload = function(e) {
          var bytes = new Uint8Array(reader.result);
          var length = bytes.byteLength;
          for(var i = 0; i < length; i++) {
               binary += String.fromCharCode(bytes[i]);
          }
          var XLSX = require('xlsx');
          wb = XLSX.read(binary, {
             type: 'binary'
          });
          outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); 
          outdata.map(v => {
               let obj = {}
               obj.name= v.名稱
               obj.unit = v.單位
               obj.use = v.用途
               _this.excelData.push(obj)
          })
           _this.reload();
           }
           reader.readAsArrayBuffer(f);
          }
           reader.readAsBinaryString(f);
      },
      handleEdit(index, row){
          alert(row.name+','+row.unit +','+row.use );
      },
      handleDelete(row,rows){
          this.$confirm('此操作將永久刪除該數據, 是否繼續?', '提示', {
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          for(var i=0 ;i<rows.length;i++)
          {
              if(rows[i].name==row.name)
                rows.splice(i, 1);
          }
          this.$message({
            type: 'success',
            message: '刪除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消刪除'
          });
        });
      }

    }
 };