npm install xlsx@0.17.0 file-saver@2.0.5 --save
然后在需要下载功能的文件下引入两个依赖
import fs from 'file-saver'
import XLSX from 'xlsx'
在点击导出的方法下加入下列代码:
说明:这里的isLoading是el-table的加载loading,然后out-table是el-table的id,<el-table v-loading="isLoading" id="out-table"></el-table>这样即可下载,但是这里只能下载不带分页的el-table数据,如果想要显示所有结果,可以另存一个el-table去设置opacity:0,用来展示所有符合的数据,将out-table的id设置到存储所有数据的el-table上,该方法还有一个问题就是只能下载el-table上展示的数据,无法展示el-table里不显示的字段,所以有一定的局限性
this.isLoading = true;
var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"), {
raw: true
});
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array"
});
try {
FileSaver.saveAs(
new Blob([wbout], {
type: "application/octet-stream"
}),
`test.xlsx`
);
this.isLoading = false;
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
this.isLoading = false;
}
return wbout;