Axios 文件下载 拿不到文件名称的解决方法
作为一名经验丰富的开发者，我将为你介绍如何使用 axios 实现文件下载并拿到文件名称的方法。
流程图
flowchart TD
Start(开始)
Step1(发送文件下载请求)
Step2(获取文件名称)
Step3(创建下载链接并点击下载)
End(结束)
Start --> Step1
Step1 --> Step2
Step2 --> Step3
Step3 --> End
步骤详解
步骤1：发送文件下载请求
首先我们需要发送一个文件下载请求。使用 axios 发起 GET 请求，并设置响应类型为 blob，以获取二进制数据。代码如下：
import axios from 'axios';
// 发送文件下载请求
axios({
method: 'GET',
url: '文件下载地址',
responseType: 'blob',
}).then(response => {
// 下一步...
}).catch(error => {
console.error('文件下载失败：', error);
});
步骤2：获取文件名称
在上一步中，我们成功获取了文件的二进制数据。接下来，我们需要从响应头中获取文件名称。首先，我们需要获取到 Content-Disposition 响应头，它包含了文件的名称信息。代码如下：
const contentDisposition = response.headers['content-disposition'];
然后，我们需要解析出文件名称。通常，Content-Disposition 的值的格式为 attachment; filename=文件名。我们可以使用正则表达式来提取文件名。代码如下：
const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
const matches = filenameRegex.exec(contentDisposition);
const filename = matches !== null && matches[1] ? matches[1].replace(/['"]/g, '') : 'download';
步骤3：创建下载链接并点击下载
我们已经获取到了文件名称，现在需要在前端创建一个下载链接，并模拟用户点击来触发下载。我们可以通过创建一个 <a> 标签，并设置 download 属性来实现。代码如下：
const downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(new Blob([response.data]));
downloadLink.setAttribute('download', filename);
// 模拟用户点击下载
downloadLink.click();
至此，我们已经完成了文件下载并拿到文件名称的整个过程。
总结
在本文中，我们介绍了如何使用 axios 实现文件下载并拿到文件名称的方法。首先，我们发送了一个文件下载请求，并设置响应类型为 blob。然后，我们从响应头中提取了文件名称，并使用正则表达式解析出来。最后，我们创建了一个下载链接，并模拟用户点击来触发下载。希望这篇文章对你有所帮助，能够解决你在文件下载过程中遇到的问题。如有任何疑问，欢迎留言讨论。
