跳到主要内容

前端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));
});