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 子参数的值，即可轻松获取文件名称。
