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：文件保存辅助工具
二、核心实现思路
- 数据准备：将Antd Table的dataSource转换为xlsx需要的二维数组格式
- 样式处理：处理日期、金额等特殊格式字段
- 文件生成：利用xlsx库生成Workbook对象
- 触发下载：通过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 = 5000let current = 0while(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的组合方案，实现了完整的表格数据导出功能。核心要点包括：
- 数据结构的灵活转换
- xlsx库的深度使用
- 浏览器兼容性处理
- 复杂场景的扩展方案
实际开发中可根据需求添加以下功能：
- 导出进度提示
- 自定义模板导入
- 多Sheet页支持
- 权限控制（敏感字段过滤）