功能概述

該代碼實現了 Vue 項目中 Excel 文件的三大核心功能：

1. Excel 導入：上傳文件并解析數據，刷新表格展示。
2. 模板下載：獲取并下載標準 Excel 模板文件。
3. 數據導出：將表格數據按多級表頭結構導出為 Excel 文件。

一. Excel 導入功能

使用FormData封裝文件數據，支持二進制文件上傳。

通過 API 請求與后端交互，根據響應狀態處理成功 / 失敗邏輯。

const uploadTemp = ref(); // 上傳組件引用
const exportImportHandler = async (files) => {const fileForm = new FormData();fileForm.append('file', files.file); // 封裝文件數據const { code, message } = await ImportExcelApi(fileForm); // 調用上傳APIif (code === 200) {ElMessage.success('導入成功');uploadTemp.value.clearFiles(); // 清空上傳組件getTableList(); // 刷新表格數據} else {ElMessage.error(message);}
};

二. 模板下載功能

通過 API 獲取模板文件的二進制數據（Blob）。

使用downloadfile工具函數將 Blob 轉換為可下載的文件。?

const fileBlob = ref();
const downloadFileTemp = async () => {try {fileBlob.value = await DownloadTemplateAPI(); // 獲取模板數據// 利用LuckyExcel處理Excel文件（可選，根據庫需求）downloadfile({ excelFileName: '儲氣庫排液情況模板.xlsx' }, fileBlob.value);} catch (error) {console.error(error);}
};

三. 數據導出功能

1.調用導出api

const exportHandler = async () => {const headers = []; // 表頭數組（二維數組，代表多級表頭）const columns = []; // 列配置數組realTableColumn.value.forEach(item => {if (item.prop !== "operator") { // 排除操作列if (item.children) {// 處理有子列的情況（三級表頭）item.children.forEach(child => {const header = [];header.push("重點工作安排"); // 一級表頭header.push(item.label);    // 二級表頭header.push(child.label);   // 三級表頭headers.push(header);columns.push({ columnKey: child.prop, columnDict: [] });});} else {// 處理普通列（兩級表頭）const header = [];header.push("重點工作安排"); // 一級表頭for (let i = 0; i < 2; i++) {header.push(item.label); // 二級表頭重復兩次（保持結構一致）}headers.push(header);columns.push({ columnKey: item.prop, columnDict: [] });}}});// 調用導出API并下載const params = { headers, columns, /* 其他參數 */ };const resData = await ExportExcelApi(params);downloadfile(resData, '重點工作安排.xlsx');
};

header.push：用于構建多級表頭的層級結構，將各級表頭名稱按順序存入數組，

最終形成二維數組（如[['一級', '二級', '三級'], ...]），供 Excel 導出工具識別。示例：

const header = [];
header.push("一級表頭");   // 數組變為 ["一級表頭"]
header.push("二級表頭");   // 數組變為 ["一級表頭", "二級表頭"]
header.push("三級表頭");   // 數組變為 ["一級表頭", "二級表頭", "三級表頭"]
headers.push(header);      // 最終存入二維數組 [["一級表頭", "二級表頭", "三級表頭"]]

2.不調用導出api

const dataOut = async () => {try {// 檢查是否有數據可導出if (!tableBody.tableData || tableBody.tableData.length === 0) {ElMessage.warning('沒有數據可導出');return;}// 動態導入xlsx庫const XLSX = await import('xlsx');// 轉換數據格式，將列prop映射為labelconst exportData = tableBody.tableData.map(item => {const row = {};tableColumn.forEach(column => {if (column.prop && column.label) {// 處理嵌套屬性const value = column.prop.split('.').reduce((acc, part) => {return acc && acc[part] !== undefined ? acc[part] : '';}, item);row[column.label] = value;}});return row;});// 創建工作簿和工作表const ws = XLSX.utils.json_to_sheet(exportData);const wb = XLSX.utils.book_new();XLSX.utils.book_append_sheet(wb, ws, '測試數據記錄');// 導出文件const fileName = `測試數據記錄_${new Date().toLocaleDateString()}.xlsx`;XLSX.writeFile(wb, fileName);ElMessage.success('數據導出成功');} catch (error) {console.error('數據導出失敗:', error);ElMessage.error('數據導出失敗，請聯系管理員');}
};

四、接口工具函數

import http from '@/utils/http/index';
export enum Api {ImportExcel = '/dilraba/Dilmurat/imports', // 導入DownloadTemplate = '/dilraba/Dilmurat/downloadTemplate', // 下載模板
}
/** 下載重點工作模板 */
export function DownloadTemplateAPI() {return http.get({url: API.DownloadTemplate,responseType: 'blob'});
}
// 導入
export function ImportExcelApi(data = {}) {return http.post({url: API.ImportExcel,data: data});
}