vue + el-table 表格数据导出为excel表格

下载依赖

npm install --save xlsx file-saver

引入插件

import * as XLSX from 'xlsx';
import FileSaver from "file-saver";

完整代码

<template><div class="administrativeCase-container"><div class="content-box"><div class="box-btn"><div class="btn"><div><el-button type="primary">导入</el-button><el-button @click="exportExcel()">导出</el-button></div></div></div><div class="box-content"><el-table:data="tableData"id="tableId"style="width: 100%"><el-table-columnprop="date"label="日期"fixedwidth="180"></el-table-column><el-table-columnprop="name"label="姓名"fixedwidth="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table></div></div></div>
</template><script>import FileSaver from "file-saver";import * as XLSX from "xlsx";export default {data () {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}],}},methods:{// 导出exportExcel() {//转换成excel时，使用原始的格式var xlsxParam = { raw: true };let fix = document.querySelector(".el-table__fixed");let wb;//判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复if (fix) {wb = XLSX.utils.table_to_book(document.querySelector("#tableId").removeChild(fix),xlsxParam);document.querySelector("#tableId").appendChild(fix);} else {wb = XLSX.utils.table_to_book(document.querySelector("#tableId"),xlsxParam);}var 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);}return wbout;},}}
</script><style></style>