vue2 使用axios 请求后台返回文件流导出为excel

目录

步骤 1: 安装 Axios

步骤 2: 创建 Axios 实例

步骤 3: 发起请求并处理文件流

说明

---

步骤 1: 安装 Axios

首先，确保项目中已经安装了 Axios。如果没有，可以通过以下命令进行安装：

npm install axios

步骤 2: 创建 Axios 实例

为了更好地管理 Axios 配置，可以创建一个 Axios 实例。例如，在 src 目录下创建一个 axiosInstance.js 文件：

import axios from 'axios';const axiosInstance = axios.create({baseURL: 'http://your-api-base-url.com', // 替换为你的后端 API 基础 URLresponseType: 'blob' // 设置响应类型为 blob
});export default axiosInstance;

步骤 3: 发起请求并处理文件流

在 Vue 组件中使用这个 Axios 实例发起请求，并处理返回的文件流以导出 Excel 文件。

例如，在 src/views/user/index.vue 文件中：

<template><div><button @click="downloadExcel">导出 Excel</button></div>
</template><script>
import axiosInstance from '@/axiosInstance';export default { methods: {async downloadExcel() {try {const response = await axiosInstance.get('api地址', {params: {//传入查询参数}});// 创建一个 blob 对象const blob = new Blob([response.data], { type: 'application/vnd.ms-excel' });// 创建一个链接元素const link = document.createElement('a');link.href = window.URL.createObjectURL(blob);link.download = 'exported-file.xlsx'; // 设置下载文件名link.click();// 释放 URL 对象window.URL.revokeObjectURL(link.href);} catch (error) {console.error('导出excel失败', error);}}}
};
</script>

说明

1. 配置 Axios 实例：我们创建了一个 Axios 实例并将 responseType 设置为 blob，以便 Axios 将响应数据处理为文件流。

2. 发起请求：在 downloadExcel 方法中，我们使用 axiosInstance.get 方法发起 GET 请求。如果需要传递查询参数，可以通过 params 选项传递。

3. 处理文件流：请求成功后，我们将响应数据创建为一个 Blob 对象，并将其类型设置为 application/vnd.ms-excel。然后，我们创建一个临时的链接元素，设置其 href 属性为 Blob 对象的 URL，并调用 click 方法触发下载。下载完成后，释放 URL 对象以避免内存泄漏。