使用 Axios 下载文件时防止文件名乱码的全过程
在开发中，当我们使用 Axios 下载文件时，常会遇到文件名乱码的情况。为了帮助刚入行的小白，本文将详细讲解如何进行文件下载，并防止文件名乱码的问题。
流程概述
在实现文件下载的过程中，我们可以将整个流程划分为几个主要步骤。下面是步骤概览的表格：
| 步骤 | 动作描述 |
|---|---|
| 1 | 发起 Axios 请求下载文件 |
| 2 | 设置响应类型为 blob |
| 3 | 创建 URL 并生成下载链接 |
| 4 | 使用 a 标签进行文件下载 |
| 5 | 释放 URL 对象并清理内存 |
以下是详细步骤的流程图：
flowchart TD
A[发起 Axios 请求] --> B[设置响应类型为 blob]
B --> C[创建 URL并生成下载链接]
C --> D[使用 a 标签进行下载]
D --> E[释放 URL 对象]
步骤详解
步骤 1：发起 Axios 请求下载文件
首先，我们需要使用 Axios 发送一个 GET 请求，来获取我们想要下载的文件。这样可以是一个 API 接口返回一个文件。
import axios from 'axios';
// 发起 Axios 请求
const downloadFile = async () => {
const response = await axios.get(' {
responseType: 'blob' // 设置响应类型为 blob
});
return response;
};
在这里，我们使用
axios.get方法发起请求，并设置responseType: 'blob'以确保我们能正确处理二进制数据。
步骤 2：设置响应类型为 blob
如上所示，我们在 Axios 请求中设置了 responseType 为 blob。这样可以确保我们能获得原始的文件数据。
步骤 3：创建 URL 并生成下载链接
接下来，我们需要将下载的 Blob 对象转换为可下载的 URL。
const createDownloadLink = (blob, filename) => {
const url = window.URL.createObjectURL(blob); // 创建一个 blob URL
const link = document.createElement('a'); // 创建 a 标签
link.href = url; // 设置 a 标签的 href 属性为 blob URL
link.download = filename; // 设置默认的下载文件名
link.click(); // 自动点击 a 标签以触发下载
};
在这里，我们创建了一个 Blob URL 并将其赋值给下载链接的
href属性。通过设置link.download，我们指定了下载的文件名。
步骤 4：使用 a 标签进行文件下载
我们在上一步中已经创建了下载链接，并通过调用 link.click() 来自动触发文件下载。
步骤 5：释放 URL 对象并清理内存
下载完成后，为了优化性能，我们应当释放 URL 对象。
const cleanup = (url) => {
window.URL.revokeObjectURL(url); // 释放 blob URL 占用的内存
};
使用
window.URL.revokeObjectURL()方法来释放 Blob URL，使得内存得以清理。
结束语
通过以上步骤，我们就可以通过 Axios 下载文件并避免文件名乱码的问题。只需注意设置 responseType 为 blob，并合理使用 Blob URL，便能顺利完成文件下载。
如果你还有任何疑问，欢迎随时提问，我们一起进步！
