跳到主要内容

前端blob文件下载

前端除了a 标签直接下载文件外,还可以通过blob下载文件。使用blob方式下载文件时,后端返回的数据类型必须为blob,前端需要对blob进行解析,文件名和文件类型一般会放在返回数据的headers中。

使用blob下载文件

  1. 下载文件方法
const downloadBlobFile = (data, filename) => {
if (!data || !filename) return false;
const url = window.URL.createObjectURL(new Blob([data], { type: "application/zip" }));
const link = document.createElement("a");
link.style.display = "none";
link.href = url;
link.setAttribute("download", decodeURIComponent(filename));
document.body.appendChild(link);
link.click();
};
  1. 请求数据,并下载
fetch("/api/download", data, {
// 指定返回的数据类型
responseType: "blob"
}).then(res => {
// 获取文件名,可能不同的请求环境会有不同的返回值,需要自行处理
const fileArr = res.headers["content-disposition"] && res.headers["content-disposition"].split(";")[1].split("=")[1].split("''");
const filename = fileArr[1];
// 下载blob文件
downloadBlobFile(res.data, decodeURIComponent(filename));
});