如何在Admin Bro后台面板中添加CSV数据导入导出功能？

一、CSV导出功能实现 #

Admin Bro支持通过自定义Action扩展功能，结合papaparse库可以快速生成并下载CSV文件。

1. 安装依赖

npm install papaparse

2. 添加自定义导出Action
   在资源配置中，针对目标模型添加导出操作：

const AdminBro = require('admin-bro')
const Papa = require('papaparse')
const { buildFeature } = require('admin-bro')
const User = require('./models/user') // 替换为你的模型

const adminBro = new AdminBro({
  resources: [
    {
      resource: User,
      features: [
        buildFeature({
          actions: {
            exportCsv: {
              actionType: 'resource',
              icon: 'Download',
              handler: async (request, response, context) => {
                // 获取资源下所有数据
                const records = await context.resource.findMany({})
                // 转换为CSV格式
                const csvContent = Papa.unparse(records.map(record => record.params))
                // 设置响应头触发下载
                response.setHeader('Content-Type', 'text/csv')
                response.setHeader('Content-Disposition', 'attachment; filename="data.csv"')
                return response.send(csvContent)
              }
            }
          }
        })
      ]
    }
  ]
})

配置完成后，目标资源的列表页顶部会出现导出CSV按钮，点击即可下载数据。

二、CSV导入功能实现 #

导入需要处理文件上传、CSV解析和批量入库三个环节，这里结合multer处理文件上传，papaparse解析CSV。

1. 安装依赖

npm install multer papaparse

2. 配置文件上传中间件
   在Admin Bro的Express路由前集成multer：

const multer = require('multer')
const upload = multer({ dest: 'uploads/' }) // 临时存储上传文件的目录

// 注入文件上传中间件到Admin Bro路由
app.use(adminBro.options.rootPath, upload.single('csvFile'))

3. 添加自定义导入Action
   同样在资源配置中添加导入操作，并编写对应的React组件渲染上传表单：

// 资源配置部分
buildFeature({
  actions: {
    importCsv: {
      actionType: 'resource',
      icon: 'Upload',
      component: AdminBro.bundle('./components/import-csv.jsx'), // 自定义上传组件路径
      handler: async (request, response, context) => {
        if (request.method === 'GET') {
          return { render: true, props: {} }
        }

        // 处理POST上传请求
        const { file } = request
        if (!file) {
          return {
            message: { type: 'error', text: '请选择CSV文件' }
          }
        }

        // 读取并解析CSV
        const fs = require('fs')
        const csvData = fs.readFileSync(file.path, 'utf8')
        const parsedRows = Papa.parse(csvData, { header: true }).data

        // 批量插入数据库（注意数据校验）
        try {
          await Promise.all(parsedRows.map(row => context.resource.create(row)))
          fs.unlinkSync(file.path) // 删除临时文件
          return {
            message: { type: 'success', text: 'CSV导入成功' },
            redirectUrl: context.resource.listUrl()
          }
        } catch (err) {
          fs.unlinkSync(file.path)
          return {
            message: { type: 'error', text: `导入失败：${err.message}` }
          }
        }
      }
    }
  }
})

4. 编写上传表单组件（import-csv.jsx）

import React from 'react'
import { Box, Button, FileInput } from '@admin-bro/design-system'
import { ActionProps } from 'admin-bro'

const ImportCsvComponent = (props: ActionProps) => {
  const { resource, action } = props
  return (
    <Box
      as="form"
      method="post"
      encType="multipart/form-data"
      action={`${resource.href}/${action.name}`}
    >
      <FileInput name="csvFile" label="选择CSV文件" accept=".csv" />
      <Button mt="xl" variant="primary" type="submit">
        开始导入
      </Button>
    </Box>
  )
}

export default ImportCsvComponent

三、关键注意事项 #

• 确保CSV表头与模型字段名完全匹配，否则无法正确映射数据
• 导入前建议添加数据校验逻辑（如必填字段检查、格式验证），避免脏数据入库
• 大文件导入需拆分批次处理，防止数据库性能问题
• 临时文件务必在操作完成后删除，避免占用服务器存储空间

内容的提问来源于stack exchange，提问作者KAMAL