umijs 下载文件

umijs项目中使用下载功能，
下载使用文件流方式
统一下载函数：path 接口地址，data：接口参数，modelName 自定义文件名

// download.ts
import { request } from 'umi';

const downloadData = async (path, data, modelName) => {
  const url = `/api/${path}/download`;
  const response = await request(url, {
    method: 'GET',
    params: { ...data },
    // ...(options || {}),
    responseType: 'arrayBuffer', // 或者responseType: 'blob'
  });
  if (response) {
    // 创建Blob对象，设置文件类型
    const { blob, fileName } = response;
    let objectUrl = URL.createObjectURL(new Blob([blob], { type: 'application/vnd.ms-excel' })); // 创建URL
    const link = document.createElement('a');
    link.href = objectUrl;
    link.download = modelName || fileName; // 自定义文件名
    link.click(); // 下载文件
    URL.revokeObjectURL(objectUrl); // 释放内存
  }
  return response;
};

export { downloadData };

入口app.tsx处增加拦截器，处理Content-Disposition

// app.tsx
// 响应拦截
request.interceptors.response.use(async (response) => {
  const disposition = response.headers.get("Content-Disposition"); // 获取Content-Disposition
  return disposition // 当Content-Disposition中有值的时候进行处理，其他请求的响应则放过
    ? {
        blob: await response.blob(), // 将二进制的数据转为blob对象，这一步是异步的因此使用async/await
        fileName: decodeURI(disposition.split(";")[1].split("filename=")[1]), // 处理Content-Disposition，获取header中的文件名
      }
    : response;
});