如何在AdminOnRest前端应用的列表视图中添加Excel导出功能？

嘿，刚接触AdminOnRest的话，自定义导出功能其实没那么复杂，我给你一步步捋清楚怎么实现：

第一步：安装必要依赖 #

首先我们需要用到xlsx库来生成Excel文件，先在项目里安装它：

npm install xlsx --save
# 或者用yarn
yarn add xlsx

第二步：创建自定义导出按钮组件 #

我们可以写一个复用的ExportButton组件，它能获取当前Grid里的数据，然后导出成Excel。这里要用到AdminOnRest提供的withListContext高阶组件来获取列表数据：

import React from 'react';
import { withListContext } from 'admin-on-rest';
import Button from '@material-ui/core/Button';
import SaveAltIcon from '@material-ui/icons/SaveAlt';
import XLSX from 'xlsx';

const ExportButton = ({ data, resource }) => {
  const exportToExcel = () => {
    // 把数据转换成Excel工作表
    const worksheet = XLSX.utils.json_to_sheet(data);
    // 创建工作簿并添加工作表
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, resource);
    // 导出文件
    XLSX.writeFile(workbook, `${resource}_export.xlsx`);
  };

  return (
    <Button
      variant="contained"
      color="primary"
      onClick={exportToExcel}
      startIcon={<SaveAltIcon />}
      style={{ marginLeft: 10 }}
    >
      导出Excel
    </Button>
  );
};

// 用withListContext包裹，获取data（当前列表数据）和resource（资源名称）
export default withListContext(ExportButton);

第三步：把按钮加到List组件的操作栏 #

接下来，在你的List页面里，把这个自定义按钮加到actions中。AdminOnRest的List组件允许你通过actions prop自定义顶部的操作按钮：

import React from 'react';
import { List, Datagrid, TextField, EmailField, actions } from 'admin-on-rest';
import ExportButton from './ExportButton';

// 自定义actions，把导出按钮加进去
const CustomListActions = ({ ...props }) => (
  <div>
    {/* 保留默认的创建按钮 */}
    <actions.CreateButton {...props} />
    {/* 添加我们的导出按钮 */}
    <ExportButton {...props} />
  </div>
);

export const UserList = (props) => (
  <List {...props} actions={<CustomListActions />}>
    <Datagrid rowClick="edit">
      <TextField source="id" />
      <TextField source="name" />
      <EmailField source="email" />
      <TextField source="phone" />
    </Datagrid>
  </List>
);

可选：自定义导出字段 #

如果不想导出所有字段，你可以在ExportButton里过滤数据，比如只导出指定的字段：

// 修改exportToExcel函数
const exportToExcel = () => {
  // 只保留需要导出的字段，还可以自定义表头名称
  const filteredData = data.map(item => ({
    ID: item.id,
    姓名: item.name,
    邮箱: item.email
  }));
  const worksheet = XLSX.utils.json_to_sheet(filteredData);
  // 后续逻辑不变...
};

这样就能实现你想要的Excel导出功能啦，亲测在AdminOnRest 2.x版本里是可以正常工作的～

内容的提问来源于stack exchange，提问作者Adil Hassan Khanday