vue + ant-design + xlsx 实现表格数据导出

Vue + Ant Design + xlsx 实现表格数据导出功能全攻略

引言

在日常管理系统开发中，表格数据导出Excel是高频需求。本文将结合Vue3生态，演示如何使用Ant Design Vue的Table组件配合xlsx库，实现优雅的表格数据导出功能。

一、环境准备

1.1 基础依赖

npm install xlsx file-saver

• xlsx：核心Excel处理库
• file-saver：文件保存辅助工具

二、核心实现思路

1. 数据准备：将Antd Table的dataSource转换为xlsx需要的二维数组格式
2. 样式处理：处理日期、金额等特殊格式字段
3. 文件生成：利用xlsx库生成Workbook对象
4. 触发下载：通过Blob对象和FileSaver实现无感下载

三、完整代码实现

3.1 表格组件模板

<template>
  <a-button type="primary" @click="handleExport">
    导出Excel
  a-button>

  <a-table :columns="columns" :dataSource="data" rowKey="id" />
template>

3.2 核心逻辑实现

import { ref } from 'vue'
import * as XLSX from 'xlsx/xlsx.mjs'
import { saveAs } from 'file-saver'

export default {
  setup() {
    // 模拟表格数据
    const data = ref([
      {
        id: 1,
        name: '张三',
        department: '技术部',
        salary: 15000,
        joinDate: '2022-03-15'
      },
      // 更多数据...
    ])

    // 表格列配置
    const columns = [
      { title: 'ID', dataIndex: 'id' },
      { title: '姓名', dataIndex: 'name' },
      { title: '部门', dataIndex: 'department' },
      { title: '薪资', dataIndex: 'salary' },
      { title: '入职日期', dataIndex: 'joinDate' }
    ]

    // 核心导出方法
    const handleExport = () => {
      // 1. 数据转换
      const exportData = data.value.map(item => ({
        'ID': item.id,
        '姓名': item.name,
        '部门': item.department,
        '薪资': `¥${item.salary.toLocaleString()}`,
        '入职日期': new Date(item.joinDate).toLocaleDateString()
      }))

      // 2. 创建工作表
      const worksheet = XLSX.utils.json_to_sheet(exportData, {
        header: Object.keys(exportData[0]),
        skipHeader: false
      })

      // 3. 创建工作簿
      const workbook = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(workbook, worksheet, '员工信息')

      // 4. 生成Excel文件
      const excelBuffer = XLSX.write(workbook, {
        bookType: 'xlsx',
        type: 'array'
      })

      // 5. 触发下载
      const blob = new Blob([excelBuffer], {
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      })
      saveAs(blob, `员工信息表_${new Date().toLocaleDateString()}.xlsx`)
    }

    return { data, columns, handleExport }
  }
}

四、关键优化点

4.1 复杂表头处理

// 嵌套表头配置示例
const columns = [
  {
    title: '基本信息',
    children: [
      { title: '姓名', dataIndex: 'name' },
      { title: '部门', dataIndex: 'department' }
    ]
  },
  {
    title: '薪资信息',
    children: [
      { title: '基本工资', dataIndex: 'baseSalary' },
      { title: '绩效奖金', dataIndex: 'bonus' }
    ]
  }
]

4.2 大数据量优化

// 分片导出（示例伪代码）
const exportLargeData = async () => {
  const chunkSize = 5000
  let current = 0

  while(current < total) {
    const chunk = await fetchDataChunk(current, chunkSize)
    // 合并数据到工作表...
    current += chunkSize
  }
}

4.3 样式增强

// 设置单元格样式
const ws = XLSX.utils.aoa_to_sheet([])
ws['A1'].s = {
  font: { bold: true, color: { rgb: "FF0000" } },
  fill: { fgColor: { rgb: "FFFF00" } }
}

五、常见问题解决

5.1 日期格式问题

// 转换日期格式
const formatDate = (dateStr) => {
  return new Date(dateStr).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  })
}

5.2 数字精度丢失

// 保留两位小数
Number(123.456).toFixed(2)

5.3 中文乱码问题

// 在XLSX.write时添加编码配置
XLSX.write(workbook, {
  bookType: 'xlsx',
  type: 'binary',
  cellStyles: true,
  defaultCharSet: 'UTF-8'
})

六、总结

本文通过Vue3 + Ant Design + xlsx的组合方案，实现了完整的表格数据导出功能。核心要点包括：

1. 数据结构的灵活转换
2. xlsx库的深度使用
3. 浏览器兼容性处理
4. 复杂场景的扩展方案

实际开发中可根据需求添加以下功能：

• 导出进度提示
• 自定义模板导入
• 多Sheet页支持
• 权限控制（敏感字段过滤）