vue + ant-design + xlsx 实现Excel多Sheet页导出功能

Vue + Ant Design 扩展：实现Excel多Sheet页导出功能

引言

在复杂业务场景中，单一Sheet页已无法满足数据展示需求。本文将演示如何基于Vue3 + Ant Design Vue + xlsx技术栈，实现以下高级导出功能：

动态多Sheet页生成
复杂数据集关联导出
Sheet间样式统一控制
内存优化策略

通过实战案例，解决多维度数据报表导出的典型问题，打造专业级Excel导出方案。

一、多Sheet页核心场景

1.1 典型应用场景

场景类型	示例说明	技术要点
主从表结构	订单主表 + 订单明细子表	主从数据关联导出
分类汇总	销售数据（按区域/时间多维度切片）	动态Sheet命名策略
多维度报表	财务三表（资产负债表/利润表/现金流量表）	样式模板复用
附件式导出	主数据 + 附件文档（图片/PDF）	混合内容处理

1.2 技术选型对比

方案	优点	缺点
单Workbook多Sheet	天然支持复杂关联	内存管理要求高
多Workbook合并	分布式处理简单	破坏Excel原生结构
CSV分片+ZIP打包	大数据量性能优异	失去Excel格式控制能力

二、核心实现原理

2.1 工作簿架构设计

复制代码

Workbook
├── Sheet1: 订单主表（100条）
├── Sheet2: 华东区明细（3000条）
├── Sheet3: 华南区明细（2500条）
└── Sheet4: 汇总分析（透视表）

2.2 内存管理模型

复制代码

数据总量 → 分片策略 → 内存峰值 → 垃圾回收
   ↑         ↑        ↑         ↑
50,000条  5,000条/片  20MB     自动GC

2.3 异步处理流程

是否点击导出初始化工作簿创建主Sheet 填充主数据是否需要明细? 创建明细Sheet 分片加载数据追加到Sheet 创建汇总Sheet 生成文件

三、完整代码实现

3.1 多Sheet导出配置

javascript 复制代码

// sheet-config.js
export const SHEET_CONFIG = {
  mainSheet: {
    name: '主数据',
    columns: ['id', 'name', 'totalAmount'],
    dataKey: 'mainData'
  },
  detailSheets: [
    {
      name: '华东区',
      filter: (record) => record.region === 'east',
      columns: ['orderNo', 'product', 'quantity']
    },
    {
      name: '华南区',
      filter: (record) => record.region === 'south',
      columns: ['orderNo', 'product', 'quantity']
    }
  ],
  summarySheet: {
    name: '汇总分析',
    pivotConfig: {
      rows: ['region'],
      columns: ['year'],
      values: ['totalAmount']
    }
  }
}

3.2 核心导出逻辑

html 复制代码

<script setup>
import { ref } from 'vue'
import * as XLSX from 'xlsx/xlsx.mjs'
import { saveAs } from 'file-saver'
import { SHEET_CONFIG } from './sheet-config'

const exportMultiSheet = async (data) => {
  // 1. 初始化工作簿
  const workbook = XLSX.utils.book_new()
  
  // 2. 创建主Sheet
  const mainSheet = createSheetFromConfig(SHEET_CONFIG.mainSheet, data.mainData)
  XLSX.utils.book_append_sheet(workbook, mainSheet, SHEET_CONFIG.mainSheet.name)

  // 3. 创建明细Sheets
  for (const config of SHEET_CONFIG.detailSheets) {
    const filteredData = data.detailData.filter(config.filter)
    const detailSheet = createSheetFromConfig(config, filteredData)
    XLSX.utils.book_append_sheet(workbook, detailSheet, config.name)
  }

  // 4. 创建汇总Sheet
  const summaryData = createPivotTable(data.mainData, SHEET_CONFIG.summarySheet.pivotConfig)
  const summarySheet = XLSX.utils.aoa_to_sheet(summaryData)
  applySheetStyle(summarySheet, SUMMARY_STYLE)
  XLSX.utils.book_append_sheet(workbook, summarySheet, SHEET_CONFIG.summarySheet.name)

  // 5. 生成文件
  const blob = await generateBlob(workbook)
  saveAs(blob, `综合报表_${new Date().toISOString().slice(0,10)}.xlsx`)
}

const createSheetFromConfig = (config, data) => {
  const header = config.columns.map(col => ({ 
    v: col, 
    t: 's',
    s: HEADER_STYLE 
  }))
  
  const body = data.map(item => 
    config.columns.map(col => ({ 
      v: item[col],
      t: typeof item[col] === 'number' ? 'n' : 's'
    }))
  )

  const sheet = XLSX.utils.aoa_to_sheet([header, ...body])
  applySheetStyle(sheet, DEFAULT_STYLE)
  return sheet
}
</script>

3.3 样式管理系统

javascript 复制代码

// 样式配置
const HEADER_STYLE = {
  font: { bold: true, color: { rgb: "FFFFFF" } },
  fill: { fgColor: { rgb: "4A90E2" } },
  alignment: { horizontal: 'center' }
}

const DEFAULT_STYLE = {
  border: {
    top: { style: 'thin' },
    bottom: { style: 'thin' },
    left: { style: 'thin' },
    right: { style: 'thin' }
  }
}

const SUMMARY_STYLE = {
  ...DEFAULT_STYLE,
  font: { bold: true },
  fill: { fgColor: { rgb: "F5A623" } }
}

// 样式应用工具
const applySheetStyle = (sheet, styleConfig) => {
  const range = XLSX.utils.decode_range(sheet['!ref'])
  for (let R = range.s.r; R <= range.e.r; ++R) {
    for (let C = range.s.c; C <= range.e.c; ++C) {
      const cellAddress = { r: R, c: C }
      const cellRef = XLSX.utils.encode_cell(cellAddress)
      if (!sheet[cellRef]) continue
      
      sheet[cellRef].s = {
        ...(sheet[cellRef].s || {}),
        ...styleConfig
      }
    }
  }
}

四、高级优化策略

4.1 动态Sheet管理

javascript 复制代码

// 动态Sheet名称生成
const generateSheetName = (baseName, index) => {
  let name = baseName
  let suffix = 1
  while (workbook.SheetNames.includes(name)) {
    name = `${baseName}_${suffix++}`
  }
  return name
}

// 使用示例
let sheetName = generateSheetName('销售数据')
while (workbook.SheetNames.includes(sheetName)) {
  sheetName = generateSheetName('销售数据', suffix++)
}

4.2 大数据量优化

javascript 复制代码

// 流式写入优化
const streamWrite = (workbook, data, config) => {
  return new Promise((resolve) => {
    let currentRow = 1
    const sheet = XLSX.utils.aoa_to_sheet([])
    XLSX.utils.book_append_sheet(workbook, sheet, config.name)

    const timer = setInterval(() => {
      const chunk = data.slice(currentRow, currentRow + 500)
      if (chunk.length === 0) {
        clearInterval(timer)
        resolve()
      }
      
      const body = chunk.map(item => 
        config.columns.map(col => ({ v: item[col] }))
      )
      XLSX.utils.sheet_add_aoa(sheet, body, { origin: currentRow + 1 })
      currentRow += 500
    }, 50)
  })
}

4.3 复杂表头处理

javascript 复制代码

// 合并单元格配置
const createMergedHeader = (sheet, mergeConfig) => {
  mergeConfig.forEach(config => {
    sheet[`!merges`] = sheet[`!merges`] || []
    sheet[`!merges`].push({
      s: { r: config.startRow, c: config.startCol },
      e: { r: config.endRow, c: config.endCol }
    })
  })
}

// 使用示例
createMergedHeader(sheet, [
  { startRow: 0, startCol: 0, endRow: 1, endCol: 0 },
  { startRow: 0, startCol: 1, endRow: 0, endCol: 2 }
])

五、生产环境实践建议

内存监控 ：使用performance.memory监控堆内存使用
错误边界：添加try-catch块捕获导出异常
Sheet索引：维护Sheet名称与数据的映射关系
格式预设：通过模板文件预设样式和公式
异步控制：使用AbortController实现可中断导出

总结

通过本文实现的多Sheet页导出方案，可获得以下提升：

结构化展示：完美呈现复杂业务数据关系
性能保障：流式处理支持10万+数据量导出
样式统一：集中式样式管理确保视觉一致性
扩展能力：动态配置支持快速迭代新报表