如何在 AntD 分页中添加自定义按钮来下载报告？

Question

我想在分页中添加下载按钮，我想允许将 table 数据下载为 excel 文件。是否可以在 Antd 分页中添加和呈现自定义按钮。在这里我附上了一张图片来显示我要归档的内容。

Answer 1

您可以使用 showTotal 的分页属性，如下所示：

import { Pagination, Button } from "antd";
import DownloadOutlined from "@ant-design/icons/DownloadOutlined";

// render Pagination
<Pagination
  total={25}
  showSizeChanger
  showTotal={(total) => (
    <div>
      {`Total ${total} items`}
      <Button
        type="primary"
        icon={<DownloadOutlined />}
        style={{ marginLeft: 8 }}
      />
    </div>
  )}
/>