react-csv-downloader：如何将数组值列导出为单个CSV列？

有两种可行的方法可以将数组字段合并到单个CSV列中：

方法一：预处理数据源，将数组转为字符串 #

在传递给CsvDownloader的数据源前，把每个对象中的数组字段转换为用指定分隔符连接的字符串，这样导出时就会作为单个列内容显示。

修改后的代码示例：

import CsvDownloader from 'react-csv-downloader';        

export function CreateReport(filteredArray) {
    // 预处理数据，将skills数组转为逗号分隔的字符串
    const processedData = filteredArray.map(item => ({
        ...item,
        skills: item.skills.join(', ') // 可自定义分隔符，比如'; '、'|'等
    }));

    const columns = [
      { id: "name", displayName: "Name" },
      { id: "email", displayName: "Email" },
      { id: "skills", displayName: "Skills"}
    ]
    
    return (
        <button className="btn download-report-btn">
          <CsvDownloader columns={columns} datas={processedData} filename="search-result">Download Report</CsvDownloader>
        </button>
    )
  }

方法二：使用columns的transform函数处理字段 #

react-csv-downloader的列配置支持transform属性，可以在导出时临时转换字段值，无需修改原始数据源。

修改后的代码示例：

import CsvDownloader from 'react-csv-downloader';        

export function CreateReport(filteredArray) {
    const columns = [
      { id: "name", displayName: "Name" },
      { id: "email", displayName: "Email" },
      { 
          id: "skills", 
          displayName: "Skills",
          transform: (value) => value.join(', ') // 转换数组为指定格式的字符串
      }
    ]
    
    return (
        <button className="btn download-report-btn">
          <CsvDownloader columns={columns} datas={filteredArray} filename="search-result">Download Report</CsvDownloader>
        </button>
    )
  }

两种方法的区别：

• 方法一直接修改了数据源，若后续业务还需要使用原始数组，需注意保留原数据；
• 方法二仅在导出阶段转换字段值，不会影响原始数据的使用。

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