vue+element ui 表格選中行匯出為excel

1：使用場景：

當選中表格中某幾條資料（圖中演示的為兩行選中一行）進行匯出為excel（如圖二）

2：安裝依賴：

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

3：引入依賴檔案：

在src資料夾中建立名為excel的資料夾（注意大小寫）
將Blob.js、export2Excel.js兩個js檔案複製到excel資料夾下
檔案連結為：https://pan.baidu.com/s/18BF4OF-wVzyw1IR_O7kUdw#list/path=%2F
提取碼：2v7d

4：表格樣式：

@selection-change="handleSelectionChange"為選中相應行時呼叫某個事件
:data="tableData"為表格的資料來源

<el-table @selection-change="handleSelectionChange" :data="tableData">

5：在methods方法中寫一個方法監控選擇的行的情況：

handleSelectionChange (val) { // 操作多選
      this.multipleSelection = val; // 多選的行會存入multipleSelection陣列中
    }
 

5：在methods方法中寫入列表下載的相關功能函式

// 列表下載
    downloadExcel () {
      this.$confirm('確定下載列表檔案?', '提示', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.excelData = this.multipleSelection; // multipleSelection是一個數組，儲存表格中選擇的行的資料。
        this.export2Excel();
      }).catch(() => {

      });
    },
    // 資料寫入excel
    export2Excel () {
      var that = this;
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/excel/export2Excel'); // 這裡必須使用絕對路徑，使用@/+存放export2Excel的路徑
        const tHeader = ['表頭名稱1', '表頭名稱2', '表頭名稱3']; // 匯出的表頭名資訊
        const filterVal = ['表頭欄位名1', '表頭欄位名2', '表頭欄位名3']; // 匯出的表頭欄位名，需要匯出表格欄位名
        const list = that.excelData;
        const data = that.formatJson(filterVal, list);

        export_json_to_excel(tHeader, data, 'excel表格名字');// 匯出的表格名稱，根據需要自己命名
      });
    },
    // 格式轉換，直接複製即可
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    }
 

5：在button中引入點選事件

<Button type="primary" @click="downloadExcel">匯出</Button>

以上就可以了