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

Vue + Ant Design Vue 实现表格数据导出Excel功能

前言

在企业管理系统中，表格数据导出Excel是高频需求。本文将手把手教你如何在Vue3项目中结合Ant Design Vue的Table组件，使用xlsx和file-saver库实现数据导出功能。适合刚入门的前端开发者，无需复杂配置，5分钟即可完成功能集成。

环境准备

1. 创建Vue项目（已创建可跳过）

npm create vue@latest
# 选择Vue3 + TS配置

2. 安装依赖库

npm install xlsx file-saver --save

完整实现步骤

1. 基础表格组件

<template>
  <a-table :columns="columns" :data-source="data" bordered>
    <template #action>
      <a-button type="primary" @click="exportExcel">导出Excel</a-button>
    </template>
  </a-table>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';

// 表格列定义
const columns = ref([
  { title: '姓名', dataIndex: 'name', key: 'name' },
  { title: '年龄', dataIndex: 'age', key: 'age' },
  { title: '地址', dataIndex: 'address', key: 'address' }
]);

// 表格数据
const data = ref([
  { key: '1', name: '张三', age: 25, address: '北京市朝阳区' },
  { key: '2', name: '李四', age: 30, address: '上海市浦东新区' }
]);
</script>

2. 导出功能实现

在script部分添加导出方法：

const exportExcel = () => {
  // 1. 转换数据为工作表
  const worksheet = XLSX.utils.json_to_sheet(data.value);
  
  // 2. 创建工作簿
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, '用户数据');
  
  // 3. 生成Excel文件
  const excelBuffer = XLSX.write(workbook, { 
    bookType: 'xlsx',
    type: 'array'
  });
  
  // 4. 创建Blob对象并下载
  const blob = new Blob([excelBuffer], {
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
  });
  saveAs(blob, '用户数据.xlsx');
};

高级功能扩展

1. 自定义表头样式

// 在创建工作表后添加样式
worksheet['!cols'] = [
  { wpx: 100 }, // 姓名列宽100px
  { wpx: 80 },  // 年龄列宽80px
  { wpx: 200 }  // 地址列宽200px
];

// 设置表头背景色
const headerRange = XLSX.utils.decode_range(worksheet['!ref']!);
for (let i = headerRange.s.r; i <= headerRange.e.r; i++) {
  const cellAddress = XLSX.utils.encode_cell({ r: i, c: 0 });
  if (!worksheet[cellAddress]) break;
  worksheet[cellAddress].s = {
    fill: { fgColor: { rgb: '2d5f8a' } },
    color: { rgb: 'ffffff' }
  };
}

2. 处理中文乱码

在Blob配置中添加字符集声明：

const blob = new Blob([excelBuffer], {
  type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
});

3. 大数据量优化

当数据超过1万条时，建议分页导出：

const exportLargeData = async () => {
  const total = await getTotalCount();
  const pageSize = 5000;
  let currentPage = 1;
  const workbook = XLSX.utils.book_new();
  
  while (currentPage * pageSize <= total) {
    const pageData = await fetchData(currentPage, pageSize);
    const worksheet = XLSX.utils.json_to_sheet(pageData);
    XLSX.utils.book_append_sheet(workbook, worksheet, `数据页${currentPage}`);
    currentPage++;
  }
  
  XLSX.writeFile(workbook, '大数据导出.xlsx');
};

常见问题解决

1. 导出文件名为乱码

确保使用saveAs方法时文件名参数正确：

saveAs(blob, encodeURIComponent('用户数据.xlsx'));

2. 表格样式丢失

需要在导出时显式设置样式，参考高级功能中的表头样式设置方法

3. 导出数据包含函数或复杂对象

使用map方法过滤数据：

const cleanData = data.value.map(item => ({
  name: item.name,
  age: item.age,
  address: item.address
}));

完整代码示例

GitHub完整示例

总结

通过本文的教程，我们实现了：

1. Ant Design Vue表格的基础数据展示
2. 使用xlsx库进行数据格式转换
3. file-saver库实现文件下载
4. 中文乱码解决方案
5. 基础样式定制和大数量优化方案