Axios封装下载文件
整体流程
下载文件的过程可以分为以下几个步骤：
| 步骤 | 描述 |
|---|---|
| 1 | 创建一个axios实例 |
| 2 | 设置请求的URL |
| 3 | 发送请求 |
| 4 | 处理响应数据 |
| 5 | 下载文件 |
下面将逐步介绍每个步骤需要做的事情和相应的代码。
1. 创建一个axios实例
首先，我们需要创建一个axios实例，用于发送HTTP请求。axios是一个基于Promise的HTTP客户端，可以在浏览器和Node.js中使用。
import axios from 'axios';
const instance = axios.create();
2. 设置请求的URL
接下来，我们需要设置请求的URL。在下载文件时，URL应该指向服务器上的文件资源。
const url = '
3. 发送请求
现在，我们可以使用axios实例发送GET请求，获取文件的数据。
instance.get(url, {
responseType: 'blob' // 设置响应类型为二进制数据
})
.then(response => {
// 处理响应数据
})
.catch(error => {
// 处理请求错误
});
在上面的代码中，我们使用responseType: 'blob'来指定响应类型为二进制数据，这是因为文件通常是以二进制形式存储的。
4. 处理响应数据
在接收到响应数据后，我们需要处理它。我们可以将响应数据保存到一个Blob对象中，然后通过URL.createObjectURL()方法创建一个临时的URL，用于下载文件。
const fileName = 'example.pdf'; // 下载文件的文件名
const blob = new Blob([response.data], { type: 'application/pdf' }); // 创建一个Blob对象
const downloadUrl = URL.createObjectURL(blob); // 创建临时URL
// 可以通过创建一个隐藏的<a>标签，设置其href属性为临时URL，然后模拟点击<a>标签来触发下载操作
const downloadLink = document.createElement('a');
downloadLink.href = downloadUrl;
downloadLink.download = fileName;
downloadLink.click();
// 下载完成后，需要释放临时URL
URL.revokeObjectURL(downloadUrl);
在上述代码中，我们首先创建了一个Blob对象，将响应数据保存到其中。然后，通过URL.createObjectURL()方法创建一个临时URL，并将其赋值给一个隐藏的<a>标签的href属性。最后，模拟点击<a>标签来触发下载操作。下载完成后，需要调用URL.revokeObjectURL()方法释放临时URL。
完整代码
import axios from 'axios';
const downloadFile = (url, fileName) => {
const instance = axios.create();
instance.get(url, {
responseType: 'blob'
})
.then(response => {
const blob = new Blob([response.data], { type: 'application/pdf' });
const downloadUrl = URL.createObjectURL(blob);
const downloadLink = document.createElement('a');
downloadLink.href = downloadUrl;
downloadLink.download = fileName;
downloadLink.click();
URL.revokeObjectURL(downloadUrl);
})
.catch(error => {
console.error('Download error:', error);
});
};
// 使用示例
const fileUrl = '
const fileName = 'example.pdf';
downloadFile(fileUrl, fileName);
以上代码将下载一个名为example.pdf的文件，该文件的URL为`
希望这篇文章能帮助到你，如果有任何疑问或进一步的问题，请随时向我提问。
