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

saadiya~

已于 2025-05-15 13:30:22 修改

阅读量501

点赞数 3

文章标签： vue.js excel 前端

于 2025-05-15 13:29:57 首次发布

本文链接：https://blog.csdn.net/m0_57997609/article/details/147980900

版权

💡 本文以告警信息导出为例，介绍 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)`