react文件下载处理文件流方法

文件下载处理

下载文件处理方法,完美解决后台返回数据流无法下载

请求时需要在请求体中加入

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;
};

如有疑问可留言,欢迎交流