vue 导出el-table表格数据

1.先安装  file-saver 、xlsx 组件

npm install file-saver -Snpm intsall xlsx -S

2.html 代码

<el-table :data="elTable" ref="" id="table-content"><el-table-column label="其他"  align="center"></el-table-column>......</el-table><el-button type="primary"  @click="exportExcel">导出 Excel</el-button>

3. js 方法

<script>
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'
export default {data() {return {elTable:[]}},methods:{/*** 导出表格数据* @returns {any}*/exportExcel() {const et = XLSX.utils.table_to_book(document.getElementById('table-content'))// 此处传入table元素节点，XLSX.utils.table_to_book对传入的数据进行加工，赋值给et// XLSX.write() 开始编写Excel表格const etout = XLSX.write(et, {bookType: 'xlsx', bookSST: true, type: 'array'})try {FileSaver.saveAs(new Blob([etout], {type: 'application/octet-stream'}), '导出表格名称.xlsx')} catch (e) {this.$message.error('导出失败')}return etout},}
}</script>

有不同见解的伙伴可以，一起探讨！