vue2.0 + element UI 中 el-table 資料導出Excel

安裝相關依賴

npm install --save xlsx file-saver
           

元件裡頭引入：這裡utils.js是我的實作方法的元件

import FileSaver from 'file-saver'
import XLSX from 'xlsx'
           

1、定義導出按鈕：

<el-button type="primary" size="medium" v-if="$store.state.isPC" @click="exportExcel">
導出報表
</el-button>
           

2、實作方法：

methods: {
    exportExcel () {
      var data = []
      data.push({
      	name: 'name',
      	id: '#table_' + '05'
      })
      utils.exportExcel(data)
    },
           

3、util中實作方法：

exportExcel (data, name = 'sheet') {
    var workbook = XLSX.utils.book_new()
    for (var index = 0; index < data.length; index++) {
      var table = document.querySelector(data[index].id).cloneNode(true)
      // // 因為element-ui的表格的fixed屬性導緻多出一個table，會下載下傳重複内容，這裡删除掉
      if (table.querySelector('.el-table__fixed') !== null) {
        table.removeChild(table.querySelector('.el-table__fixed'))
      }
      var tableSheet = XLSX.utils.table_to_sheet(table, {
        raw: true
      })
      XLSX.utils.book_append_sheet(workbook, tableSheet, data[index].name)
    }
    var wbout = XLSX.write(workbook, {
      bookType: 'xlsx',
      bookSST: true,
      type: 'array'
    })
    try {
      FileSaver.saveAs(
        new Blob([wbout], {
          type: 'application/octet-stream'
        }),
        name + '.xlsx'
      )
    } catch (e) {
      if (typeof console !== 'undefined') console.log(e, wbout)
    }
    return wbout
  },
           

備注：

（1）一次性導出多個頁面所有表格：如下類型

methods: {
    exportExcel () {
      var data = []
      this.tabList.forEach(item => {
        data.push({
          name: item.name,
          id: '#table_' + item.key
        })
      })

      utils.exportExcel(data)
    },
           

這裡tabList是定義的資料集合。裡面包含name、key等對應導出表格哦關鍵字。

注意：前提是多個頁面中的表格資料已經擷取完全。

(1)導出一個頁面多個表格：如下類型 但是有多個表格。

exportExcel () {
      var data = []
      data.push({
        name: this.activeName ,
        id: '#table_rank'
      })
      this.bestWorstTabel.forEach(item => {
        data.push({
          name: item.title,
          id: '#table_' + item.key
        })
      })

      utils.exportExcel(data)
    },
           

依次添加data資料即可。

3、導出一個頁面多個表格：如下類型 但是有多個表格。

exportExcel () {
      var data = []
      data.push({
        name: this.activeName ，
        id: '#table_series'
      })
      data.push({
        name: '達成率',
        id: '#table_'
      })

      utils.exportExcel(data)
    },
           

4、單頁面多表格導出：如下情況

exportExcel () {
      var data = []
      data.push({
        name: this.nowTab,
        id: '#table_'
      })
      this.tabList.forEach(item => {
        data.push({
          name: item.name,
          id: '#table_' + item.key
        })
      })

      utils.exportExcel(data)
    },
           

其實也是提前獲得多表格的資料。