js/axios/umi-request 根据后端返回的二进制流下载文件

type ResponseType = {
  data: Blob;
  headers: {
    'content-disposition'?: string;
  };
};
// 下载 (创建a标签)
export const downloadBlob = (response: ResponseType) => {
  const blob = response.data; // 获取响应中的 Blob 数据
  const contentDisposition = response.headers['content-disposition'];
  let fileName = ''; // 默认文件名
  if (contentDisposition) {
    // 提取文件名并解码成中文
    const fileNameRegex = /filename=([^;]+)/;
    const fileNameMatch = contentDisposition.match(fileNameRegex);
    fileName = fileNameMatch ? fileNameMatch[1] : '';
    if (fileName) {
      fileName = decodeURIComponent(fileName);
    }
  }
  // 创建 Blob 对象后，你可以根据需要执行文件下载逻辑
  const url = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = fileName; // 设置下载文件的名称
  link.style.display = 'none';
  document.body.appendChild(link);
  link.click();
  // 清除创建的链接
  window.URL.revokeObjectURL(url);
  document.body.removeChild(link);
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

用法很简单。

  const downLoad= async () => {
    const response = await axios(...);
    //将完整的响应头丢进去即可
    aDownload(response);
  };
1
2
3
4
5