Vue3 Axios 下载文件

Axios 是一个基于 Promise 的 HTTP 库，用于发送异步请求。在 Vue3 中使用 Axios 可以方便地与后端进行数据交互。除了发送请求获取数据，有时我们还需要下载文件。本文将介绍如何在 Vue3 中使用 Axios 下载文件。

安装 Axios

首先，我们需要安装 Axios。在 Vue3 项目中，可以使用 npm 或者 yarn 进行安装。

npm install axios

或者

yarn add axios

发送下载文件请求

使用 Axios 下载文件十分简单，只需使用 Axios 的 get 方法发送请求，并设置 responseType 为 'blob'。

下面是一个示例，使用 Axios 下载文件：

import axios from 'axios';

const downloadFile = async () => {
  try {
    const response = await axios.get(' {
      responseType: 'blob',
    });
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'file.pdf');
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  } catch (error) {
    console.error(error);
  }
};

上述示例中，我们使用 axios.get 方法发送 GET 请求，并设置 responseType 为 'blob'。responseType 为 'blob' 表示响应的数据是二进制数据。

接着，我们创建一个 Blob 对象，并将响应的数据传入。然后，我们使用 window.URL.createObjectURL 方法创建一个临时的 URL，将其赋值给下载链接的 href 属性。

接下来，我们创建一个 <a> 标签，设置其 download 属性为文件名，并将链接添加到页面上。然后，通过调用 link.click() 方法触发下载操作。最后，我们将链接从页面上移除。

示例应用

为了更好地理解如何在 Vue3 中使用 Axios 下载文件，我们创建一个示例应用。在该示例应用中，我们提供一个按钮，点击按钮将触发文件下载。

首先，我们需要使用 axios 进行导入：

import axios from 'axios';

接下来，我们添加一个下载按钮，并为它添加一个点击事件处理函数：

<template>
  <div>
    <button @click="downloadFile">下载文件</button>
  </div>
</template>

在 Vue3 中，我们可以使用 setup 方法来添加逻辑：

<script>
import axios from 'axios';

export default {
  setup() {
    const downloadFile = async () => {
      try {
        const response = await axios.get(' {
          responseType: 'blob',
        });
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'file.pdf');
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      } catch (error) {
        console.error(error);
      }
    };

    return {
      downloadFile,
    };
  },
};
</script>

在 downloadFile 函数中，我们发送 GET 请求，获取文件数据，并通过创建临时链接实现文件下载。

总结

通过使用 Axios 的 get 方法和设置 responseType 为 'blob'，我们可以轻松地在 Vue3 中下载文件。在示例应用中，我们使用 setup 方法来添加逻辑，并为下载按钮添加点击事件处理函数。通过这种方式，我们可以方便地实现文件下载功能。

希望本文对你理解如何在 Vue3 中使用 Axios 下载文件有所帮助！

参考链接

• [Axios Github](
• [Axios 文档](
• [Blob 对象](