vue el-table纯前端下载excel

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; 

标签：wbout,el,vue,xlsx,excel,isLoading,table,out
来源： https://www.cnblogs.com/shenwh/p/16396979.html