如何使用 axios 下载文件 - Javascript

在前端开发中，我们通常需要从服务器端下载文件，比如图片、压缩包等等。在 Javascript 中，可以使用 axios 库来实现文件下载功能。

安装 axios

在使用 axios 之前，需要先安装 axios。可以使用 npm 或 yarn 来进行安装。

npm install axios

或者

yarn add axios

下载文件

使用 axios 下载文件的方法非常简单，只需要使用 axios.get 方法并设置 responseType 为 blob 就可以了。

以下是一个下载图片的例子：

axios({
  url: 'http://example.com/image.jpg',
  method: 'GET',
  responseType: 'blob',
}).then(response => {
  const url = window.URL.createObjectURL(new Blob([response.data]));
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', 'image.jpg');
  document.body.appendChild(link);
  link.click();
});

代码解释：

• url：需要下载的文件地址。
• responseType：设置响应类型为 blob。
• new Blob([response.data])：将获取到的文件内容转换成 Blob。
• window.URL.createObjectURL：将 Blob 对象转换成 URL。
• document.createElement('a')：创建一个 <a> 标签。
• link.href：设置 <a> 标签的 href 属性为下载链接。
• link.setAttribute('download', 'image.jpg')：设置 <a> 标签的 download 属性为文件名。
• document.body.appendChild(link)：将 <a> 标签添加到页面上。
• link.click()：模拟点击下载链接。

完整代码

以下是完整的下载图片的例子：

axios({
  url: 'http://example.com/image.jpg',
  method: 'GET',
  responseType: 'blob',
}).then(response => {
  const url = window.URL.createObjectURL(new Blob([response.data]));
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', 'image.jpg');
  document.body.appendChild(link);
  link.click();
});

总结

使用 axios 下载文件非常简单，只需要设置 responseType 为 blob，然后将获取到的文件内容转换成 Blob 后再通过 URL 创建下载链接即可。