下载文件返回文件流blob处理

blob文件流

调用接口时指定返回类型blob

responseType: "blob",
返回文件流通过插件打开窗口(file-saver)

file-saver 插件

import { saveAs } from "file-saver";
saveAs(blobFile, fname); // 直接会打开窗口

在axios中处理blob文件流返回报错

  // blob错误类型是blob 需要转换
  if (error.response.config.responseType === "blob") {
    data = await resolveBlobRsp(data);
  }
  // 解析blob返回
function resolveBlobRsp(data: any) {
  const reader = new FileReader(); //FileReader读取blob文件流
  return new Promise((resolve) => {
    reader.onload = (e) => {
      if (e.target && typeof e.target.result === "string") {
        let errData = JSON.parse(e.target.result);
        resolve(errData);
      } else {
        resolve(null);
      }
    };
    reader.readAsText(data); // 读取为text
  });
}

需要从返回的返回头里面获取文件名

axios接口异步请求处理时间得钩子responseHook

• 1.声明钩子函数

declare module "axios" {
  interface AxiosRequestConfig {
    /** 接口报错时是否显示警告，默认为开启  */
    warn?: boolean;
    /** 响应返回钩子  */
    responseHook?: (res: AxiosResponse) => void;
  }
}

• 2.在axios拦截器里调用钩子函数

axios.interceptors.response.use(
sync (response) => {
	const { config } = response;
     // 处理事件钩子
    if (config?.responseHook) {
      config.responseHook(response);
    }
 }
)

• 3.调用接口时使用钩子函数

{
  responseType: "blob",
  // 响应返回钩子 获取rsp数据
  responseHook: (rsp) => {
    exportTitle = getExportTitle(rsp, "***.xlsx");
  },
}
// 获取导出的文件名
export function getExportTitle(rsp: AxiosResponse<any>, defaultTitle: string) {
  let exportTitle =
    rsp.headers["content-disposition"].split("=")?.[1] ?? defaultTitle;
  exportTitle = decodeURI(exportTitle); //解码
  return exportTitle;
}