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)`

六、效果展示

✅ 可筛选导出
✅ 可选择部分导出
✅ 支持文件命名
✅ 下载完成即销毁资源

七、总结

本文通过 Vue 3 + Axios + Element Plus 实现了一个实用的 Excel 导出功能，核心关键点包括：

使用 responseType: 'blob' 正确获取文件流
Blob + URL + a 标签实现下载
设置 Content-Type 与 download 属性确保兼容性

希望本文能帮你快速实现导出功能，如有疑问欢迎评论交流！

📌 收藏 + 点赞 + 关注，持续更新更多前端实战技巧！