Vue 3 实现后端 Excel 文件流导出功能（Blob 下载详解）

💡 本文以告警信息导出为例，介绍 Vue 3 中如何通过 Axios 调用后端接口并处理文件流，实现 Excel 自动下载功能。

📑 目录

一、前言
二、后端接口说明
三、前端实现思路
四、导出功能完整代码
五、常见问题处理
六、效果展示
七、总结

一、前言

在数据后台管理系统中，Excel 导出功能是一个非常常见的需求。本文将介绍如何在 Vue 3 项目中，通过后端返回的 文件流（Blob） 实现 Excel 自动下载功能，解决文件类型识别、命名、Blob 转换等常见问题。

二、后端接口说明

请求地址：/operation/alarm/dealExport
请求方式：GET
请求参数：支持条件筛选（如告警 ID、时间等）
响应格式：Content-Type: application/vnd.ms-excel
返回内容：.xlsx 文件二进制流（Blob）

三、前端实现思路

请求接口时通过 responseType: 'blob' 获取流数据。
接收到的 Blob 数据创建 URL 链接。
使用 <a> 标签触发下载，设置 download 为导出文件名。
下载完成后销毁链接释放资源。

四、导出功能完整代码

1️⃣ 接口封装（`api/alarm.js`）

// 告警信息导出接口
export const alarmExport = (params) => {return request({url: '/operation/alarm/dealExport',method: 'get',params,responseType: 'blob', // 关键点！});
};

2️⃣ Vue 组件中的导出方法（使用 Composition API）

import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { alarmExport } from '@/api/alarm';const selectedList = ref([]); // 已选择的数据项
const queryParamsAlarm = ref({// 示例参数，可根据实际业务填写alarmType: '',startTime: '',endTime: '',pageNum: 1,pageSize: 10,
});/** 导出 */
const handleExport = async () => {const params = { alarmIds: '', ...queryParamsAlarm.value };delete params.pageNum;delete params.pageSize;// 提取选择项的 alarmId 列表if (selectedList.value.length > 0) {const ids = selectedList.value.map((item) => item.alarmId);params.alarmIds = ids.join(',');}try {const res = await alarmExport(params);// 构造 Blob 下载const blob = new Blob([res], { type: 'application/vnd.ms-excel' });const url = window.URL.createObjectURL(blob);const link = document.createElement('a');link.href = url;link.download = `告警导出_${new Date().toLocaleDateString()}.xlsx`;document.body.appendChild(link);link.click();document.body.removeChild(link);window.URL.revokeObjectURL(url); // 释放内存ElMessage.success('导出成功');} catch (error) {console.error('导出失败', error);ElMessage.error('导出失败，请重试');}
};

五、常见问题处理

问题	解决方案
导出的文件是乱码	检查 `Blob` 类型是否为 `application/vnd.ms-excel`
下载没反应	确保使用了 `responseType: 'blob'` 且 `a.download` 设置了文件名
文件扩展名错误	`link.download = xxx.xlsx` 明确设置扩展名
无法创建链接	检查是否正确调用 `URL.createObjectURL(blob)`