第一种方法:使用插件
1、安装依赖 yarn add xlsx 和 yarn add file-saver
2、在组件中引入
import FileSaver from ‘file-saver’
import XLSX from ‘xlsx’
3、添加下载方法
注意:#out-table为table节点的id
<el-table id="out-table"></el-table>
// 导出
outTab () {
let fix = document.querySelector('.el-table__fixed');
let wb
if (fix) {
wb = XLSX.utils.table_to_book(document.querySelector("#out-table").removeChild(fix));
document.querySelector("#out-table").appendChild(fix);
} else {
wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
}
let wbout = XLSX.write(wb, {
bookType: 'xlsx',
bookSST: true,
type: 'array'
})
try {
FileSaver.saveAs(new Blob([wbout], {
type: 'application/octet-stream'
}), 'file.xlsx')
} catch (e) {
if (typeof console !== 'undefined') console.log(e, wbout)
}
return wbout;
}
第二种:后端返回文件流下载
js代码
this.exportList(exporInfo).then((e)=>{
console.log('导出列表:',this.exportListData)
let blob = new Blob([this.exportListData.data], {type: 'application/vnd.ms-excel'})
let downloadElement = document.createElement('a') // 获取table表格
let href = window.URL.createObjectURL(blob); //创建下载的链接
downloadElement.href = href;
downloadElement.download = this.exportListData.headers.filenames; //下载后文件名
document.body.appendChild(downloadElement);
// 方法一:跳链接下载(推荐这种方法,可以解决下载之后的表格打不开的问题)
let getUrlData = `https://zhbs.fpsd.unionpay.com/jfAdmin/api/v1/order/export?${param(exporInfo)}` // 拼接的跳转路径
window.location.href = getUrlData
// 方法二:直接正常下载(下载的文件可能会出现打不开的情况)
// downloadElement.click(); //点击下载
// document.body.removeChild(downloadElement); //下载完成移除元素
// window.URL.revokeObjectURL(href); //释放blob对象
})
注意:
1、要下载引入jquery-param插件:import param from 'jquery-param'
2、exportList 为封装的调后端接口的方法
3、blob 为处理后的后端返回的文件流数据
4、a 为 table 表格的 class 类