小编点评

## 总结 前端下载文件主要分为两种方式： 1. **直接返回网络地址的方式**：适用于静态文件，例如图片和视频等。 2. **返回文件流的方式**：适用于动态文件，例如根据前端选择，导出不同的统计结果等。 **关键问题及解决方案:** 1. **responseType问题**：默认值为 `json` 或 `text`，但二进制文件下载失败，原因是 `Blob` 的默认类型是 `blob`，而文本文件的类型不是 `blob`，导致下载失败。解决方案是明确设置 `responseType` 为 `blob`。 2. **下载文件类型问题**：由于 `RestPost<T>` 需要设置 `responseType` 为 `blob`，但文本文件的 `responseType` 应该设置为 `text`，因为下载完成后，要读取到的内容不是 JSON 格式的，而是文本格式。解决方案是设置 `responseType` 为 `blob`。 ## 其他建议 1. 可以根据实际情况进行参数设置，例如指定文件长度等。 2. 可以添加下载完成后，提示用户打开文件等操作。 3. 可以使用进度条等辅助提示，让用户了解下载进度。

正文

概要

在前端下载文件是个很通用的需求，一般后端会提供下载的方式有两种：

1. 直接返回文件的网络地址（一般用在静态文件上，比如图片以及各种音视频资源等）
2. 返回文件流（一般用在动态文件上，比如根据前端选择，导出不同的统计结果 excel 等）

第一种方式比较简单，但是使用场景有限。
第二种方式通用性更好，最近再使用 antd 开发的过程中，下载文件部分折腾了一下午，于是将关键的部分和遇到的一些问题整理如下。

前端核心代码

我的前端是基于 antd pro 开发的，这里不在详细介绍 antd pro 相关的内容，只说明下封装的下载函数：

import { request } from "umi";

// 这是我在项目中封装的下载函数，有2个参数：
// 一个是文件的id，用来给后端API搜索文件用的
// 一个是文件名filename，这个给前端用的，下载时，默认保存的文件名
export async function DownloadFile(id: string, filename: string) {
  return RestGet<BlobPart>(`/api/v1/file/download/${id}`, "blob").then(
    (res) => {
      let url = URL.createObjectURL(new Blob([res], { type: "octet/stream" }));
      let a = document.createElement("a");
      a.href = url;
      a.download = filename;
      a.click();
      URL.revokeObjectURL(url);
    }
  );
}

// GET 方式请求后端API
export async function RestGet<T>(
  url: string,
  responseType: "json" | "blob" = "json"
) {
  return request<T>(url, {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
    },
    responseType: responseType,
  });
}

// POST 方式请求后端API
export async function RestPost<T>(
  url: string,
  body: any,
  responseType: "json" | "blob" = "json"
) {
  return request<T>(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    data: body,
    responseType: responseType,
  });
}

这个下载函数本质就是创建一个 <a> 元素，然后模拟点击此 <a> 元素来完成下载。
对于 DownloadFile函数，我是根据自己的需要封装的，不一定非得是这两个参数，可以根据自己的后端 API 来定制需要传入的参数。

将下载封装成函数之后看，前端就可以通过一个按钮来下载文件了，比如：

<Button
  type="link"
  key="download"
  icon={<DownloadOutlined />}
  onClick={() =>
    DownloadFile(item.video_file_id as string, (item.name as string) + ".mp4")
  }
>
  下载
</Button>

我这里是 GET 方式下载文件的，如果参数比较多且复杂的话，也可以使用 POST 方式。
只要把 DownloadFile中 RestGet<T>改成 RestPost<T>，并调整相应的参数即可。

遇到的问题

调试其中的下载方式就不提了，遇到的最大困难，搜索半天也没什么人提到的就是请求中的 responseType问题。

刚开始，我没有设置 responseType，默认值好像是 json或者 text。
测试时发现，下载文本类型的文件没有问题，但是下载二进制文件的话，比如视频或者图片，下载之后总是无法正常打开，前后端也没有任何错误提示。

折腾了半天，才试出 responseType传入 blob的话，二进制文件才能正常下载。
而且发现，设置成 blob的话，文本类型的文件也能正常下载打开。