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>
有不同见解的伙伴可以,一起探讨!