Vue.js 中使用 Axios 下载后端文件流的详尽指南

2024-02-05 05:28:52

前言

在 Vue.js 应用程序中，经常需要下载后端提供的文件，例如 PDF、图像或文档。通过使用 Axios 库，我们可以轻松实现这个任务。Axios 是一个功能强大的 HTTP 客户端，为 Vue.js 提供了一个简单且直观的方式来处理 HTTP 请求。

设置 Axios

在使用 Axios 之前，需要将其安装到 Vue.js 项目中。可以通过以下步骤安装 Axios：

npm install axios

安装完成后，在 Vue.js 组件中导入 Axios：

import axios from "axios";

配置下载请求

为了下载文件流，需要使用 Axios 的 responseType 选项将响应类型配置为 "blob"。Blob 是一个表示二进制数据的特殊类型，它允许我们下载文件而不必将其转换为字符串。

const response = await axios({
  url: "/download/file.pdf",
  method: "get",
  responseType: "blob"
});

处理文件流

下载完成后，response.data 将包含下载的文件流。我们可以使用 Blob API 将文件流保存到本地：

const blob = new Blob([response.data], { type: response.headers['Content-Type'] });

然后，使用 URL.createObjectURL 创建一个文件 URL，以便将其提供给 <a> 标签，以便用户下载文件：

const fileURL = URL.createObjectURL(blob);

使用文件 URL 下载文件

创建文件 URL 后，我们可以使用 <a> 标签为用户提供下载链接：

<a href="{{ fileURL }}" download>下载文件</a>

完整示例

以下是一个完整示例，展示了如何在 Vue.js 中使用 Axios 下载后端文件流：

<template>
  <a v-bind:href="fileURL" download>下载文件</a>
</template>

<script>
import axios from "axios";

export default {
  async created() {
    const response = await axios({
      url: "/download/file.pdf",
      method: "get",
      responseType: "blob"
    });

    const blob = new Blob([response.data], { type: response.headers['Content-Type'] });
    this.fileURL = URL.createObjectURL(blob);
  },

  beforeDestroy() {
    URL.revokeObjectURL(this.fileURL);
  }
};
</script>