将elementui分页表格导出为excel

1. 安装依赖

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

2. 在需要的组件中引入

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

3. .vue：

<el-button size = "small" type = "primary"  @click = "exportExcel">导出</el-button>>
<el-table :data = "tableContent" border size = "mini" id = "exportExcel" >
//表格内容
</el-table>

• 用id标识要导出的表格

4. .js：

exportExcel(){
	let data = this.tableContent;
	this.tableContent = this.tableContentAll;//把不分页的所有数据都渲染到表格中
	var fix = document.querySelector('.el-table__fixed-right');//删除fixed的dom节点
	let wb;
    this.$nextTick(() => {
    	if (fix) {
    		wb = XLSX.utils.table_to_book(document.querySelector('#exportExcel').removeChild(fix));
       		document.querySelector('#exportExcel').appendChild(fix);//恢复删除fixed的dom节点
        } else {
            wb = XLSX.utils.table_to_book(document.querySelector('#exportExcel'));
        }
        let 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.tableContent = data;//恢复表格的分页数据
        return wbout;
    })
}

• 若是表格有固定在页面右侧的列，需要去掉fixed效果，选择器是.el-table__fixed-right，再到后面append上去；若是表格有固定表头，选择器是.el-table__fixed，不然会导致数据导出两遍。
• 若是表格有分页，我把表格的不分页的全部数据拿到(pageSize设置一个很大的数，如：1000000)，在点击导出时将数据渲染到需要导出数据的表格中，等到导出完成后，再把之前的分页数据换过来。
  这样的方式，如果数据过多的时候(上千条数据)，由于表格渲染虚有一定时间，会出现页面卡顿，但是应对几百条数据还是可以的。
• 利用这种方法导出的excel会有右侧一栏的按钮文字。
• 如果你有前端实现的更好的方法，记得留言哦！