企业官网建设流程全解析

1. ExcelJS在Vue3中的原生导出实战

最近在重构一个后台管理系统时，遇到了需要在前端直接导出带复杂样式的Excel报表的需求。经过技术选型对比，最终选择了ExcelJS这个纯前端解决方案。与常见的后端导出方案相比，前端直接处理能减少服务器压力，特别是在需要实时预览报表样式的场景下优势明显。

ExcelJS是一个强大的JavaScript库，支持在浏览器和Node.js环境中操作Excel文件。在Vue3项目中，我们可以通过Composition API更优雅地集成它。下面我将分享完整的实现过程，包括核心配置、样式设置技巧和实际开发中遇到的坑。

2. 环境准备与基础配置

2.1 安装与基础引入

首先通过npm安装ExcelJS：

npm install exceljs

在Vue3组件中，推荐在setup()函数内引入：

import { ref } from 'vue' import ExcelJS from 'exceljs' export default { setup() { const exportExcel = async () => { // 导出逻辑将在这里实现 } return { exportExcel } } }

2.2 创建工作簿与工作表

ExcelJS的核心对象是Workbook（工作簿），每个工作簿包含多个Worksheet（工作表）。创建基础结构的代码如下：

const workbook = new ExcelJS.Workbook() const worksheet = workbook.addWorksheet('销售报表') // 设置工作表默认属性 worksheet.properties.defaultRowHeight = 20 worksheet.views = [ { state: 'frozen', xSplit: 0, ySplit: 1 } // 冻结首行 ]

3. 数据导出核心实现

3.1 基础数据导出

假设我们要导出一个销售数据表格，首先需要定义表头和数据：

// 设置表头 worksheet.columns = [ { header: '订单编号', key: 'id', width: 20 }, { header: '客户名称', key: 'customer', width: 15 }, { header: '销售金额', key: 'amount', width: 12 }, { header: '下单日期', key: 'date', width: 15 } ] // 添加数据行 const salesData = [ { id: 'ORD-2023-001', customer: '张三', amount: 2580, date: '2023-05-01' }, { id: 'ORD-2023-002', customer: '李四', amount: 3650, date: '2023-05-02' } ] worksheet.addRows(salesData)

3.2 文件生成与下载

生成Excel文件并触发浏览器下载：

const buffer = await workbook.xlsx.writeBuffer() const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }) const url = URL.createObjectURL(blob) const link = document.createElement('a') link.href = url link.download = '销售报表.xlsx' link.click() // 释放内存 setTimeout(() => { URL.revokeObjectURL(url) }, 100)

4. 高级样式设置技巧

4.1 单元格样式配置

ExcelJS支持丰富的样式设置，通过style对象进行配置：

// 表头样式 worksheet.getRow(1).eachCell((cell) => { cell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FF4F81BD' } } cell.font = { bold: true, color: { argb: 'FFFFFFFF' }, size: 12 } cell.alignment = { vertical: 'middle', horizontal: 'center' } cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } } }) // 数据行样式 worksheet.eachRow((row, rowNumber) => { if (rowNumber > 1) { row.eachCell((cell) => { cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } } }) } })

4.2 条件格式与特殊样式

实现类似Excel的条件格式功能：

worksheet.eachRow((row, rowNumber) => { if (rowNumber > 1) { const amountCell = row.getCell('amount') if (amountCell.value > 3000) { amountCell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFFF0000' } } } } })

4.3 合并单元格与公式

实现复杂的表格布局：

// 合并单元格 worksheet.mergeCells('A1:D1') const titleCell = worksheet.getCell('A1') titleCell.value = '2023年5月销售报表' titleCell.font = { size: 16, bold: true } // 添加公式 worksheet.getCell('D10').value = { formula: 'SUM(C2:C9)', result: 0 // 初始值 }

5. 性能优化与常见问题

5.1 大数据量处理

当数据量较大时（超过5000行），需要注意性能优化：

// 禁用自动列宽计算 worksheet.properties.defaultColWidth = 15 // 分批次添加数据 const batchSize = 1000 for (let i = 0; i < largeData.length; i += batchSize) { const batch = largeData.slice(i, i + batchSize) worksheet.addRows(batch) // 释放事件循环 await new Promise(resolve => setTimeout(resolve, 0)) }

5.2 常见问题排查

1. 中文乱码问题：

   • 确保字体设置为支持中文的字体，如：

   font: { name: 'Microsoft YaHei', size: 11 }

2. 样式不生效：

   • 检查样式对象的属性拼写是否正确
   • 确保在添加数据后再应用样式

3. 文件损坏无法打开：

   • 检查Blob的MIME类型是否正确
   • 确保buffer生成完成后再创建下载链接

4. 内存泄漏：

   • 及时调用URL.revokeObjectURL()
   • 对于超大文件考虑使用流式写入

6. 实际项目中的扩展应用

6.1 与后端API结合

虽然我们主要讨论前端导出，但在实际项目中常需要与后端配合：

// 从API获取数据 const fetchData = async () => { const response = await axios.get('/api/sales-report') return response.data } // 导出时获取最新数据 const exportExcel = async () => { const salesData = await fetchData() // ...后续导出逻辑 }

6.2 动态模板生成

对于需要重复使用的报表模板，可以创建配置化的模板生成器：

const createReportTemplate = (config) => { const workbook = new ExcelJS.Workbook() const worksheet = workbook.addWorksheet(config.sheetName) // 应用配置的列定义 worksheet.columns = config.columns // 应用全局样式 if (config.globalStyle) { worksheet.eachRow((row) => { row.eachCell((cell) => { Object.assign(cell, config.globalStyle) }) }) } return workbook }

6.3 多工作表导出

复杂报表通常需要多个工作表：

// 添加多个工作表 const summarySheet = workbook.addWorksheet('汇总') const detailSheet = workbook.addWorksheet('明细') // 在不同工作表间复制样式 const copyStyle = (sourceCell, targetCell) => { targetCell.font = {...sourceCell.font} targetCell.fill = {...sourceCell.fill} // 复制其他样式属性... }

7. 样式设置的实用技巧

7.1 颜色定义最佳实践

ExcelJS使用ARGB格式的颜色值，推荐使用以下方式管理颜色：

const COLORS = { HEADER_BG: 'FF4F81BD', HEADER_TEXT: 'FFFFFFFF', HIGHLIGHT: 'FFFF0000', // 更多颜色定义... } // 使用示例 cell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: COLORS.HEADER_BG } }

7.2 创建可复用的样式对象

避免重复定义样式：

const styles = { header: { fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FF4F81BD' } }, font: { bold: true, color: { argb: 'FFFFFFFF' } } }, // 其他样式定义... } // 应用样式 Object.assign(cell, styles.header)

7.3 响应式列宽设置

根据内容动态调整列宽：

worksheet.columns.forEach(column => { let maxLength = 0 column.eachCell({ includeEmpty: true }, cell => { const columnLength = cell.value ? cell.value.toString().length : 0 if (columnLength > maxLength) { maxLength = columnLength } }) column.width = Math.min(Math.max(maxLength + 2, 10), 50) })

8. 与其他Vue3特性的结合

8.1 使用Composition API封装

将导出功能封装为可复用的Composable：

// useExcelExport.js import { ref } from 'vue' import ExcelJS from 'exceljs' export function useExcelExport() { const exportLoading = ref(false) const exportToExcel = async (data, options) => { exportLoading.value = true try { const workbook = new ExcelJS.Workbook() // ...导出逻辑 return true } catch (error) { console.error('导出失败:', error) return false } finally { exportLoading.value = false } } return { exportLoading, exportToExcel } }

8.2 与Pinia状态管理集成

在大型项目中，可以使用Pinia管理导出状态：

// stores/excelStore.js import { defineStore } from 'pinia' import { useExcelExport } from '@/composables/useExcelExport' export const useExcelStore = defineStore('excel', () => { const { exportLoading, exportToExcel } = useExcelExport() return { exportLoading, exportToExcel } })

8.3 结合Vue Router实现权限控制

根据路由权限控制导出功能：

import { useRoute } from 'vue-router' import { computed } from 'vue' const route = useRoute() const canExport = computed(() => { return route.meta.permissions?.includes('export') ?? false })

9. 测试与调试技巧

9.1 单元测试策略

对导出功能编写单元测试：

import { test, expect } from 'vitest' import { exportToExcel } from '@/utils/excelExport' test('生成基础Excel文件', async () => { const testData = [ { id: 1, name: '测试数据' } ] const result = await exportToExcel(testData, { filename: 'test.xlsx' }) expect(result).toBe(true) })

9.2 调试技巧

在Chrome开发者工具中调试：

1. 使用console.log(worksheet)打印整个工作表对象
2. 检查生成的buffer是否正确：

   console.log(new Uint8Array(buffer))

3. 使用try-catch捕获样式设置错误

9.3 性能监控

对于大数据量导出，监控性能指标：

const startTime = performance.now() // ...导出操作 const endTime = performance.now() console.log(`导出耗时: ${(endTime - startTime).toFixed(2)}ms`)

10. 替代方案对比

虽然ExcelJS功能强大，但在某些场景下可能需要考虑其他方案：

11. 项目实战经验分享

在实际项目中使用ExcelJS导出时，我总结了以下几点经验：

1. 样式预定义：在项目初期就定义好一套统一的样式规范，避免后期反复调整。

2. 性能取舍：对于超过1万行的数据，建议分sheet导出或考虑后端方案。

3. 错误处理：导出功能一定要做好错误处理和用户反馈，特别是网络不稳定的移动端场景。

4. 移动端适配：在移动设备上测试导出功能，iOS和Android对Blob的处理有细微差异。

5. 版本兼容：如果用户可能使用旧版Excel打开文件，要测试兼容性并考虑降级方案。

12. 未来可能的改进方向

基于目前的使用经验，我认为还可以在以下方面进行优化：

1. Web Worker支持：将耗时的导出操作放到Web Worker中，避免阻塞UI线程。

2. 增量导出：对于超大文件，实现边生成边下载的流式导出。

3. 模板引擎集成：结合类似EJS的模板引擎，实现更灵活的报表设计。

4. 可视化配置工具：开发一个可视化界面，让非技术人员也能配置导出模板。

5. TypeScript强化：为项目添加完整的类型定义，提升开发体验。