In this case, this prompt will appear first. If you click No, you will exit directly. If you click Yes, another error prompt will appear.
The problem found is that this axios request lacks an annotation. It is necessary to add the responseType:'blob' commented below to the request. After adding it, the downloaded excel file can be opened normally.
// 导出用券列表
export function exportTicket(data) {
return request({
responseType: "blob",
url: "/courtesycardlog/export",
method: "post",
data,
});
}
// responseType: "blob",Replenish:
The corresponding export method, the prompt information of successful or failed export needs to be introduced into element-ui. If it is not introduced, just delete it.
handleExport() {
this.$confirm("是否确定导出?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "info",
})
.then(() => {
if (this.list.length) {
// 这里填写接口及参数
exportTerminalnode(this.queryParams).then((res) => {
let blob = new Blob([res], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
}); //type这里表示xlsx类型
let downloadElement = document.createElement("a");
let href = window.URL.createObjectURL(blob); //创建下载的链接
downloadElement.href = href;
let time = new Date().toLocaleString();
// 记得更改导出时 excel 的 title
downloadElement.download = ("门店信息" + time + ".xlsx").replace(
new RegExp("/", "g"),
"-"
); //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象
this.$message({ type: "success", message: "下载成功" });
});
} else {
this.$message({ type: "warning", message: "暂无数据" });
}
})
.catch(() => {
this.$message("取消导出");
});
},