React中用react-csv将嵌套对象数组转为可下载CSV文件

要实现这个需求，你需要先把嵌套的原始数据转换成react-csv能识别的扁平结构，再配合库的组件生成可下载的CSV文件，步骤如下：

1. 安装react-csv库 #

在项目根目录执行命令安装：

npm install react-csv
# 或者用yarn
yarn add react-csv

2. 转换原始数据为目标格式 #

首先需要把嵌套的出勤数据处理成表头数组和数据行数组：

• 表头需要包含姓名以及所有出勤日期
• 每一行数据对应一个学生的姓名和各日期的出勤状态

以下是数据转换的示例函数：

// 假设原始数据存储在变量rawData中
const transformAttendanceData = (rawData) => {
  // 提取所有唯一的日期（自动去重，兼容不同学生日期集合不一致的情况）
  const allDates = [...new Set(rawData.flatMap(student => student.OOP.map(item => item.date)))];
  
  // 构建表头：["姓名", "09/10/22", "10/10/22", ...]
  const headers = ["姓名", ...allDates];
  
  // 构建数据行：每个学生对应一行，包含姓名和各日期的出勤状态
  const rows = rawData.map(student => {
    // 把当前学生的出勤记录转成日期为键的对象，方便快速查找
    const attendanceMap = student.OOP.reduce((acc, item) => {
      acc[item.date] = item.ispresent;
      return acc;
    }, {});
    
    // 按照表头顺序拼接数据，无记录的日期可自定义默认值（比如"未记录"）
    return [student.name, ...allDates.map(date => attendanceMap[date] ?? "未记录")];
  });
  
  return { headers, rows };
};

3. 实现React下载组件 #

使用react-csv提供的CSVLink组件生成下载按钮，完整组件示例：

import React from 'react';
import { CSVLink } from 'react-csv';

const AttendanceCsvDownloader = ({ rawData }) => {
  const { headers, rows } = transformAttendanceData(rawData);
  
  // 适配react-csv需要的格式：将表头和数据转为键值对结构
  const csvConfig = {
    headers: headers.map(header => ({ label: header, key: header })),
    data: rows.map(row => {
      const rowObj = {};
      headers.forEach((header, index) => {
        rowObj[header] = row[index];
      });
      return rowObj;
    })
  };

  return (
    <CSVLink
      data={csvConfig.data}
      headers={csvConfig.headers}
      filename="学生出勤记录.csv"
      className="download-btn"
    >
      下载出勤CSV
    </CSVLink>
  );
};

// 使用组件时传入原始数据
// <AttendanceCsvDownloader rawData={你的原始出勤数据} />

额外说明 #

• 如果不同学生的出勤日期集合不一致，allDates会自动包含所有出现过的日期，无对应记录的位置可通过??运算符设置默认值
• CSVLink支持自定义按钮样式、文件名等参数，可根据项目需求调整

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