描述:
用户筛选数据后选择导出功能,就能下载相关筛选后数据的xls文档
<a-button @click="queryExport" :loading="exporting">条件导出</a-button>
提示方法:
// 提示用户筛选数据,不筛选则下载全部数据
confirmDownload() {
return new Promise((resolve) => {
this.$confirm({
title: "提示",
content: "如果没有选中条件将下载全部,是否确认",
onOk() {
resolve(true);
},
onCancel() {},
});
});
},
导出方法:
//条件导出
queryExport() {
// 收集查询条件
const query = {
...this.selectData,
ids: [...this.selectedRowKeys],
};
//用户确认提示后调用接口拿到筛选后的资源路径
this.confirmDownload().then(() => {
this.exporting = true;
unOperationCarManageApi
.queryExport(query)
.then((res) => {
//调用自定义的download方法下载
download("/ExportFile" + res.result);
})
.finally(() => {
this.exporting = false;
});
});
},
download方法:
/**
* 文件下载
* @param {string} path
*/
function download(path) {
// 如果路径不存在抛出错误
if (!path) throw new Error("请传入文件地址");
// 创建一个a链接
const aElement = document.createElement("a")
//a链接的targer(指定在何处显示链接的资源)为_blank(新窗口打开)
aElement.target = '_blank';
//a链接的样式设置为隐藏且不占位置
aElement.style.display = "none";
// 设置a链接完整的资源路径
aElement.href = config.downloadPrefix + path;
// 追加到页面主体最后面
document.body.append(aElement);
// 主动触发点击事件
aElement.click();
//触发后移除a标签元素
aElement.remove();