服务端

服务端代码实现很简单,如下所示:

[HttpGet]
public IActionResult Download()
{
    var fileStream = System.IO.File.OpenRead("D:/files/students.xlxs");
    return File(fileStream, "application/octet-stream", HttpUtility.UrlEncode("学生名单.xlsx"));
}

这里需要注意的是 File() 方法的第三个参数 fileDownloadName,若该参数含有中文需要进行 Url 编码,否则客户端浏览器会乱码。

服务端还有一个需要注意的地方,在 Startup.cs 文件中,需要在 ConfigureServices 方法中做如下设置,否则客户端浏览器不能读取响应头中的 Content-Disposition,无法获取服务端设置的文件下载名。

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options =>
    {
        options.AddDefaultPolicy(
            builder =>
            {
                builder.WithExposedHeaders("Content-Disposition"); // 将响应头中的 Content-Disposition 暴露给客户端访问
            }
        );
    });
}

至此,服务端的工作全部完成。

客户端浏览器

客户端浏览器请求并下载服务端文件脚本如下:

this.$axios
        .get('/File/Download', {
          responseType: "blob",
        })
        .then((resp) => {
          const fileName = decodeURIComponent(
            resp.headers["content-disposition"].split(";")[1].split("=")[1]
          );
          const url = window.URL.createObjectURL(new Blob([resp.data]));
          const link = document.createElement("a");
          link.href = url;
          link.setAttribute("download", fileName);
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);

          this.$message.success("下载成功");
        })
        .catch((err) => {
            this.$message.error(err);
        });

有几个需要注意的点:

  1. axios 请求参数中的 responseType 需要设置成 blob
  2. 服务端提供的下载文件名通过解析响应头 content-disposition 中的 filename 获得,同时还要注意使用 decodeURIComponent 解码 url
  3. 创建文件下载超链接,并模拟点击实现文件自动下载