vue 文件下载(导出)excel的方法
目前有一个到处功能的需求,这是我用过DeepSeek生成的导出(下载)excel的一个方法。
1.excel的文件名是后端生成的,放在了响应头那里。
2.这里也可以自己制定文件名。
3.axios用的是原生的axios,不要用处理过的,有拦截等等。
downloadFile(record) {
let that = this
let apiBaseUrl = window._CONFIG['domianURL'] || "/jeecg-boot";
return new Promise((resolve, reject) => {
axios({
url: apiBaseUrl + `/ABC/ABC?id=${record.id}&date=${record.monthTime}`,
method: "GET",
responseType: "blob", // important
withCredentials: true,
headers: {
"X-Access-Token": Vue.ls.get(ACCESS_TOKEN),
},
}).then((response) => {
// 处理blob响应
const blob = new Blob([response.data]);
const contentDisposition = response.headers["content-disposition"];
// 错误处理:当响应是JSON时说明出错
if (blob.type === "application/json") {
const reader = new FileReader();
reader.onload = () => {
try {
const errData = JSON.parse(reader.result);
reject(errData.message || "导出失败");
that.$message.error(errData.message || "导出失败");
} catch (e) {
reject("导出失败");
that.$message.error("导出失败");
}
};
reader.readAsText(blob);
return;
}
// 创建下载链接
const downloadUrl = window.URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = downloadUrl;
let fileName = "";
if (contentDisposition) {
const fileNameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
const matches = fileNameRegex.exec(contentDisposition);
if (matches && matches[1]) {
fileName = matches[1].replace(/['"]/g, "");
fileName = decodeURIComponent(fileName);
// 我这里文件名的前缀有 utf-8 所以在这里做了一个处理,如果没有,则可以注释这里
fileName = fileName.replace(/^utf-8['"]?/, "");
}
}
link.download = fileName || `export_${new Date().getTime()}.xlsx`;
// 触发下载
document.body.appendChild(link);
link.click();
// 清理资源
window.URL.revokeObjectURL(downloadUrl);
document.body.removeChild(link);
resolve();
})
.catch((error) => {
reject(error);
that.$message.error("下载失败,请检查网络连接");
});
});
},
其实这个通用的方法,基本可以实现所需的要求。