element-ui实现导入导出

亲测可行

一.下载依赖包

npm install -S file-saver xlsx
npm install -D script-loader
npm install xlsx

二. 在src文件夹下创建excel文件夹，导入Blob.js和Export2Excel.js文件并在使用的组件中引入

两个文件的地址：
链接：https://pan.baidu.com/s/10j6EPR-bK6ZL5AL5xOCiCw
提取码：118y

我在使用的组件中引入xlsx，没有放到全局
import XLSX from ‘xlsx’

- 导出

1.在template

<el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="index"
        label="id"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="nickName"
        label="描述">
      </el-table-column>
    </el-table>
    <el-button type="primary" size="small" @click="export2Excel()">导出</el-button>

2.data中模拟数据

 tableData: [
        {'index':'0',"nickName": "小明是个帅哥", "name": "小明"},
        {'index':'1',"nickName": "小红是个美女", "name": "小红"},
        {'index':'2',"nickName": "小兰是个美女", "name": "小兰"}
      ]

3.在methods中定义方法

//在methods中定义方法
    export2Excel() {
      require.ensure([], () => {
         const { export_json_to_excel } = require('../excel/Export2Excel');
         const tHeader = ['序号', '昵称', '姓名'];
         // 上面设置Excel的表格第一行的标题
         const filterVal = ['index', 'nickName', 'name'];
         // 上面的index、nickName、name是tableData里对象的属性
         const list = this.tableData;  //把data里的tableData存到list
         const data = this.formatJson(filterVal, list);
         export_json_to_excel(tHeader, data, '导出列表的名字');
         })
     },
    formatJson(filterVal, jsonData) {
         return jsonData.map(v => filterVal.map(j => v[j]))
    },

- 导入

1.在template中写

<a href="javascript:;" class="file">
 <input type="file" @change="importf(this)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/>
</a>

2. data中定义一个空数组excelData:[],

3.methods写方法

 //methods
    importf(obj) {
       let _this = this;
       this.file = event.currentTarget.files[0];
       var rABS = false; //是否将文件读取为二进制字符串
       var file = this.file; 
 
       FileReader.prototype.readAsBinaryString = function(f) {
         var binary = "";
         var rABS = false; //是否将文件读取为二进制字符串
         var pt = this;
         var workbook; //读取完成的数据
         // var excelData;
         var reader = new FileReader();
         reader.onprogress = function(e) {
           let total = file.size;
           _this.progress = (e.loaded/total)*100;
           console.log( _this.progress);
         };
         reader.onload = function(e) {
           try {
             var bytes = new Uint8Array(reader.result);
             var length = bytes.byteLength;
             for(var i = 0; i < length; i++) {
               binary += String.fromCharCode(bytes[i]);
             }
             if(rABS) {
               workbook = XLSX.read(btoa(fixdata(binary)), { //手动转化
                 type: 'base64'
               });
             }else {
               workbook = XLSX.read(binary, {
                 type: 'binary'
               });
             }
             // excelData = [];
           } catch(e) {
             console.log('文件类型不正确');
             return;
           }
           var fromTo = '';
           for (var sheet in workbook.Sheets) {
             if (workbook.Sheets.hasOwnProperty(sheet)) {
               fromTo = workbook.Sheets[sheet]['!ref'];
               _this.excelData = _this.excelData.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
             }
           }
           console.log(_this.excelData);
           
         };
 
         reader.readAsArrayBuffer(f);  
 
       } 
 
       var reader = new FileReader();
       if(rABS) {
         reader.readAsArrayBuffer(file);
       }else {
         reader.readAsBinaryString(file);
       } 
 
     },

三.遇到的问题

解决：
把光标之前的删了