vue+elementui 中el-table导出为Excel

在后台管理系统的项目中，一般都会有将table表格导出为Excel，此文主要总结了如何实现该功能。

1.安装相关依赖

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

2.在需要的组件中引入

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

3.在组件的methods中写入方法

exportExcel () {
	/* generate workbook object from table */
	 //表名
	 var wb = XLSX.utils.table_to_book(document.querySelector('.orderTable'))
	 /* 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' }), 'order.xlsx')
	 } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
	 return wbout
},

注意：

• XLSX.utils.table_to_book中放的是table的dom节点
• order.xlsx导出的是表格的名字

4.导出即可

<el-button type="primary" style="background-color: #0086b3" @click="exportExcel">导出</el-button>