vue+elementUI，el-table 数据导出Excel

1. 安装依赖

//xlsx 与 file-saver依赖
npm install --save xlsx file-saver`

https://github.com/SheetJS/js-xlsx
https://github.com/eligrey/FileSaver.js

2.在需要的组件中引入

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

3. .vue：

<el-table :data="checkOrderList" border id="out-table">
//表格内容
</el-table>
<el-button type="primary" @click="exportExcel">点击导出</el-button>

4.methods中引入方法

exportExcel (id,title) {
  /* generate workbook object from table */
  var wb = XLSX.utils.table_to_book(document.querySelector(#out-table))
  /* get binary string as output */
  var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
   try {
      FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), title+'.xlsx')
   } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
   return wbout
}

到这表格就可以导出了

---

5.重复数据问题和分页

• 若是表格有固定在页面右侧的列，需要去掉fixed效果，选择器是.el-table__fixed-right，再到后面append上去；若是表格有固定表头，选择器是.el-table__fixed，不然会导致数据导出两遍。
• 若是表格有分页，我把表格的不分页的全部数据拿到(pageSize设置一个很大的数，如：1000000)，在点击导出时将数据渲染到需要导出数据的表格中，等到导出完成后，再把之前的分页数据换过来。

解决方法:

exportExcel() {
            const data = this.checkOrderList
            this.checkOrderList = this.allCheckOrderList // 把不分页的所有数据都渲染到表格中
            const fix = document.querySelector('.el-table__fixed')
            let wb
            this.$nextTick(() => {
                if (fix) { // 判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去
                    wb = XLSX.utils.table_to_book(document.querySelector('#out-table').removeChild(fix))
                    document.querySelector('#out-table').appendChild(fix)
                } else {
                    wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
                }
                const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
                try {
                    FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '流水表.xlsx')
                } catch (e) {
                    if (typeof console !== 'undefined') console.log(e, wbout)
                }
                this.checkOrderList = data // 恢复表格的分页数据
                return wbout
            })
        },