当前位置：首页 > news >正文

Vue 项目中 Excel 导入导出功能笔记

news 来源：原创 2025/6/29 8:26:57

功能概述

该代码实现了 Vue 项目中 Excel 文件的三大核心功能：

Excel 导入：上传文件并解析数据，刷新表格展示。
模板下载：获取并下载标准 Excel 模板文件。
数据导出：将表格数据按多级表头结构导出为 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});
}