目录
[步骤 1: 安装 Axios](#步骤 1: 安装 Axios)
[步骤 2: 创建 Axios 实例](#步骤 2: 创建 Axios 实例)
[步骤 3: 发起请求并处理文件流](#步骤 3: 发起请求并处理文件流)
步骤 1: 安装 Axios
首先,确保项目中已经安装了 Axios。如果没有,可以通过以下命令进行安装:
bash
npm install axios
步骤 2: 创建 Axios 实例
为了更好地管理 Axios 配置,可以创建一个 Axios 实例。例如,在 src
目录下创建一个 axiosInstance.js
文件:
javascript
import axios from 'axios';
const axiosInstance = axios.create({
baseURL: 'http://your-api-base-url.com', // 替换为你的后端 API 基础 URL
responseType: 'blob' // 设置响应类型为 blob
});
export default axiosInstance;
步骤 3: 发起请求并处理文件流
在 Vue 组件中使用这个 Axios 实例发起请求,并处理返回的文件流以导出 Excel 文件。
例如,在 src/views/user/index.vue
文件中:
javascript
<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>
说明
-
配置 Axios 实例 :我们创建了一个 Axios 实例并将
responseType
设置为blob
,以便 Axios 将响应数据处理为文件流。 -
发起请求 :在
downloadExcel
方法中,我们使用axiosInstance.get
方法发起 GET 请求。如果需要传递查询参数,可以通过params
选项传递。 -
处理文件流 :请求成功后,我们将响应数据创建为一个 Blob 对象,并将其类型设置为
application/vnd.ms-excel
。然后,我们创建一个临时的链接元素,设置其href
属性为 Blob 对象的 URL,并调用click
方法触发下载。下载完成后,释放 URL 对象以避免内存泄漏。