💡 本文以告警信息導出為例，介紹 Vue 3 中如何通過 Axios 調用后端接口并處理文件流，實現 Excel 自動下載功能。

---

📑 目錄

• 一、前言

• 二、后端接口說明

• 三、前端實現思路

• 四、導出功能完整代碼

• 五、常見問題處理

• 六、效果展示

• 七、總結

---

一、前言

在數據后臺管理系統中，Excel 導出功能是一個非常常見的需求。本文將介紹如何在 Vue 3 項目中，通過后端返回的 文件流（Blob） 實現 Excel 自動下載功能，解決文件類型識別、命名、Blob 轉換等常見問題。

---

二、后端接口說明

• 請求地址：/operation/alarm/dealExport

• 請求方式：GET

• 請求參數：支持條件篩選（如告警 ID、時間等）

• 響應格式：Content-Type: application/vnd.ms-excel

• 返回內容：.xlsx 文件二進制流（Blob）

---

三、前端實現思路

1. 請求接口時通過 responseType: 'blob' 獲取流數據。

2. 接收到的 Blob 數據創建 URL 鏈接。

3. 使用 <a> 標簽觸發下載，設置 download 為導出文件名。

4. 下載完成后銷毀鏈接釋放資源。

---

四、導出功能完整代碼

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 屬性確保兼容性

希望本文能幫你快速實現導出功能，如有疑問歡迎評論交流！

---

📌 收藏 + 點贊 + 關注，持續更新更多前端實戰技巧！