Excel 导出实现
- 2026-08-21 00:19:37
Excel 导出实现使用 xlsx 库（SheetJS） 纯前端实现，无需后端 列宽计算：遍历每列，取表头与数据最大长度，限制在 10-50 字符 数据转换：API 字段 → 中文表头，处理日期、枚举、空值 分页聚合：循环获取，每次 100 条，直到获取全部 文件命名：业务名称_日期时间.xlsx 用户体验：加载提示、错误处理、成功反馈 核心：通用函数 + 业务转换函数 + 分页聚合策略。
一、技术栈
二、核心函数：exportToExcel
export function exportToExcel<T>(data: T[], filename: string, sheetName = 'Sheet1') {// 1. 创建空工作簿const workbook = XLSX.utils.book_new();// 2. JSON转工作表（对象键→表头，值→数据行）const worksheet = XLSX.utils.json_to_sheet(data);// 3. 自动计算列宽（根据内容长度）const colWidths = Object.keys(data[0]).map((key) => {const maxLength = Math.max(key.length,...data.map(row => String(row[key] || '').length));return { wch: Math.min(Math.max(maxLength + 2, 10), 50) };});worksheet['!cols'] = colWidths;// 4. 添加工作表并下载XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);XLSX.writeFile(workbook, `${filename}.xlsx`);}
三、数据转换层
// 算力中心导出示例export function exportComputeCenterLog(data, getChangeTypeText) {const exportData = data.map(item => ({'流水号': item._id,'创建时间': formatDate(item.createdAt),'类型': getChangeTypeText(item.changeType),'算力变化': item.changeValue >= 0 ? `+${item.changeValue}` : item.changeValue,'用户备注': item.description || '--',}));const filename = `算力中心记录_${formatDate(Date.now()).replace(/[\s:]/g, '-')}`;exportToExcel(exportData, filename, '算力中心记录');}
四、分页数据聚合
const handleExport = async () => {toast.loading('正在获取数据...');const allList = [];let currentPage = 1;const pageSize = 100;// 循环获取所有数据while (true) {const res = await fetchData({ page: currentPage, size: pageSize });allList.push(...res.data);if (allList.length >= res.totalSize) break;currentPage++;}exportComputeCenterLog(allList, getChangeTypeText);toast.success(`成功导出 ${allList.length} 条记录`);};
五、关键点
本文来自网友投稿或网络内容，如有侵犯您的权益请联系我们删除，联系邮箱：wyl860211@qq.com 。
