基于antd的table表格excel简单导出实践

2024-02-17 19:00:22

食用前提：对antd，react有一定的基础。antd中table组件的属性介绍在antd官网有详细的介绍。这里主要介绍本文用到的属性。

column.title：列头显示文字。
column.dataIndex：列数据在数据项中对应的路径，这里用的是string类型，故解释…
antd官网：https://ant.design/components/table-cn/

正文：

在实际项目开发中，我们经常会遇到需要将数据导出为excel的需求。antd的table组件提供了丰富的导出功能，我们可以通过简单的配置，轻松实现将数据导出到本地。

首先，我们需要安装antd的excel导出插件。

npm install antd-table-excel --save

然后，在需要导出的table组件中，导入antd-table-excel。

import { Table, Button } from 'antd';
import { exportTable } from 'antd-table-excel';

接下来，我们需要配置导出的相关参数。

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
  },
  {
    title: '地址',
    dataIndex: 'address',
  },
];

const data = [
  {
    name: '张三',
    age: 20,
    address: '北京市海淀区',
  },
  {
    name: '李四',
    age: 25,
    address: '上海市浦东区',
  },
  {
    name: '王五',
    age: 30,
    address: '广州市天河区',
  },
];

exportTable({
  columns: columns,
  data: data,
  filename: '导出数据',
  sheetName: '导出',
});