关于vue.js:vueelementUIeltable-数据导出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
            })
        },