使用 Axios 下载文件时解决文件名乱码问题
在开发过程中，遇到文件下载时文件名乱码的问题并不稀奇。本文将手把手教你如何使用 Axios 下载文件并解决文件名乱码的问题。我们将通过一个简单的流程表和代码示例，逐步讲解每个步骤的具体实现方式。
流程概述
| 步骤 | 描述 |
|---|---|
| 1 | 使用 Axios 发起请求下载文件 |
| 2 | 处理响应数据，将其转换为 Blob 对象 |
| 3 | 根据响应头提取文件名 |
| 4 | 创建链接元素并触发下载 |
| 5 | 确保文件名的正确编码 |
详细步骤
第一步：使用 Axios 发起请求下载文件
首先需要安装 Axios。如果还没有安装 Axios，可以使用以下命令：
npm install axios
接下来，使用 Axios 发起下载请求。代码如下：
import axios from 'axios';
// 发起请求下载文件
axios.get(' {
responseType: 'blob' // 设置返回类型为 blob
})
.then(response => {
// 进行后续处理
})
.catch(error => {
console.log(error); // 捕获并打印错误
});
这段代码将创建一个 GET 请求，去下载位于指定 URL 的文件，并将返回形式设置为 Blob，这样可以处理二进制数据。
第二步：处理响应数据，将其转换为 Blob 对象
接收到响应后，我们需要将其处理为 Blob。这一过程在上面的代码中已隐含。
第三步：根据响应头提取文件名
使用 Axios，可以通过响应头中的 Content-Disposition 属性来获取文件名。接下来，我们需要执行以下操作：
// 提取文件名
const disposition = response.headers['content-disposition'];
let fileName = 'downloadedFile'; // 默认文件名
if (disposition && disposition.indexOf('attachment') !== -1) {
const matches = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/.exec(disposition);
if (matches != null && matches[1]) {
fileName = decodeURIComponent(matches[1].replace(/['"]/g, '')); // 解码文件名
}
}
在这里，我们判断响应头中是否包含 attachment，然后使用正则表达式提取文件名，并使用 decodeURIComponent 解码文件名，以确保它不会出现乱码。
第四步：创建链接元素并触发下载
下载的最后一步是创建一个链接元素并触发下载。代码如下：
// 创建一个下载链接
const url = window.URL.createObjectURL(new Blob([response.data]));
const a = document.createElement('a');
a.href = url;
a.download = fileName; // 设置文件名
document.body.appendChild(a);
a.click(); // 触发下载
document.body.removeChild(a); // 下载后移除元素
window.URL.revokeObjectURL(url); // 释放内存
这段代码创建一个 Blob URL，并使用临时的 <a> 元素执行文件下载，最后释放资源以避免内存泄漏。
第五步：确保文件名的正确编码
前面描述的过程已经解决了大部分乱码问题，但要确保文件名能在不同的浏览器中正确显示，我们一定要提供正确的编码。通过 decodeURIComponent 来处理文件名能有效保证我们的文件名在大多数情况下是正确的。
旅程图
我们可以用 Mermaid 语法绘制这段工作流程，如下所示：
journey
title Axios 下载文件处理
section 下载文件
使用 Axios 发送请求: 5: Axios
获取响应数据: 4: Browser
section 处理响应
提取文件名: 3: Developer
创建下载链接: 4: Developer
触发下载: 5: Browser
状态图
为了更好地理解整个过程的状态变化，我们也可以用 Mermaid 语法绘制状态图：
stateDiagram
[*] --> Requesting
Requesting --> Receiving : 请求被发送
Receiving --> Processing : 数据接收成功
Processing --> Downloading : 文件名提取成功
Downloading --> [*] : 文件下载完成
Receiving --> [*] : 出现错误处理
结尾
通过上述步骤，你现在应该能够使用 Axios 成功下载文件，并避免文件名乱码的问题。掌握这个技能，将极大地提升你在前端开发过程中的文件处理能力。如果在实现过程中碰到任何问题，欢迎随时提出，大家一起交流学习！
