文件下载处理
下载文件处理方法,完美解决后台返回数据流无法下载
请求时需要在请求体中加入
method: "get",
responseType: "blob",
拿到返回的res后调用下面方法,直接完成下载
export default (res: any) => {
let blob = new Blob([res.data]);
// 提取文件名
let contentDisposition: any = "";
if (res.headers["content-disposition"])
contentDisposition = res.headers["content-disposition"];
if (res.headers["Content-disposition"])
contentDisposition = res.headers["Content-disposition"];
const err = contentDisposition.match(/err=(.*)/);
if (err && err[1]) {
message.error(decodeURI(err[1]));
return;
}
const fileName = contentDisposition.match(/filename=(.*)/)[1];
if (typeof window.navigator.msSaveBlob !== "undefined") {
// 兼容IE,window.navigator.msSaveBlob:以本地方式保存文件
window.navigator.msSaveBlob(blob, decodeURI(fileName));
} else {
// 创建新的URL并指向File对象或者Blob对象的地址
const blobURL = window.URL.createObjectURL(blob);
// 创建a标签,用于跳转至下载链接
const tempLink = document.createElement("a");
tempLink.style.display = "none";
tempLink.href = blobURL;
tempLink.setAttribute("download", decodeURI(fileName));
// 兼容:某些浏览器不支持HTML5的download属性
if (typeof tempLink.download === "undefined") {
tempLink.setAttribute("target", "_blank");
}
// 挂载a标签
document.body.appendChild(tempLink);
tempLink.click();
document.body.removeChild(tempLink);
// 释放blob URL地址
window.URL.revokeObjectURL(blobURL);
}
return true;
};
如有疑问可留言,欢迎交流