一些东拼西凑复制粘贴加上部分个人理解的原理
Blob(Binary Large Object): 二进制大数据对象。
在JS中, Blob类型的对象表示文件对象的原始数据,可以通过new Blob()方法创建Blob对象,将后端返回的数据存储到Blob对象中。
Blob用作URL:
Blob URL只能由浏览器在内部生成。
URL.createObjectURL()
将创建一个对Blob或File对象的特殊引用,稍后可以使用URL.revokeObjectURL()
释放该引用。
Blob URL/Object URL是一种伪协议,允许Blob和File对象用作图像、二进制数据的下载链接等内容的URL源。即将后端返回的二进制数据封装为Blob对象,然后使用URL.createObjectURL()生成本地URL,之后通过虚拟点击进行文件下载。
代码实现
在发送请求时,一定要声明响应类型,这样获取到的返回数据才会是文件流,另外不要对请求进行过滤拦截,直接使用axios进行请求,将所有后端信息全部返回:
/** 点击导出按钮 下载表格 */
async exportTest(param: any) {
const res = await axios.post(
"请求地址",
param,
{
responseType: "blob",
}
);
return res;
}
在请求完成后,进行数据的下载:
const res = await exportTest(param);
if (res) {
const blob = new Blob([res.data]);
const link = document.createElement("a");
link.download = decodeURI(
res.headers["content-disposition"].replace(/.*filename=/, "")
); //后端可以将文件名放在headers中返回
link.style.display = "none";
link.href = URL.createObjectURL(blob);
document.body.appendChild(link);
link.click();
URL.revokeObjectURL(link.href);
document.body.removeChild(link);
}
网友评论