如何在前端下载后端返回的文件流时，获取请求头中的文件名称？

1. 前言

在前后端分离的开发模式下，前端需要从后端获取文件流，以便进行文件下载。同时，前端还需要获取请求头中的文件名称，以便为用户提供更加友好的下载体验。本文将介绍如何在前端下载后端返回的文件流时，获取请求头中的文件名称。

2. 获取文件流

前端可以通过发送请求的方式获取后端返回的文件流。通常情况下，后端会先将文件流传输到前端，然后前端再将文件流转换为文件进行下载。

下面是一个示例代码：

axios({
  method: 'get',
  url: '/download',
  responseType: 'blob'
}).then((response) => {
  const url = window.URL.createObjectURL(new Blob([response.data]));
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', 'file.pdf');
  document.body.appendChild(link);
  link.click();
})

在上述代码中，axios 是一个常用的 HTTP 请求库。responseType 参数设置为 blob，表示响应数据是二进制流。响应数据包含在 response.data 中，前端可以利用浏览器提供的 Blob 接口将文件流转换为下载链接。

3. 获取请求头中的文件名称

后端返回文件流时，通常会在响应头中设置 Content-Disposition 实体头字段，用于指定文件名称、类型等信息。其中，Content-Disposition 实体头字段中的 filename 子参数用于指定文件名称。

在前端下载文件时，可以通过获取响应头中的 Content-Disposition 实体头字段，进而获取文件名称。下面是一个示例代码：

axios({
  method: 'get',
  url: '/download',
  responseType: 'blob'
}).then((response) => {
  const disposition = response.headers['content-disposition'];
  const matchArray = disposition.match(/filename="(.*)"/);
  const filename = matchArray[1];
  const url = window.URL.createObjectURL(new Blob([response.data]));
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', filename);
  document.body.appendChild(link);
  link.click();
})

在上述代码中，response.headers['content-disposition'] 获取了响应头中的 Content-Disposition 实体头字段。利用正则表达式匹配出 filename 子参数的值，即可获取文件名称。最后，在创建 <a> 标签时，将 download 属性设置为文件名称。

4. 总结

本文介绍了如何在前端下载后端返回的文件流时，获取请求头中的文件名称。通过获取响应头中的 Content-Disposition 实体头字段，再利用正则表达式匹配出 filename 子参数的值，即可轻松获取文件名称。