React中如何将JSON数据转换为Excel格式并按规则展示数据

需求：导出Excel时，数组类型的字段值在同一个单元格内按元素分行展示，例如下方测试数据中orange对应的3个价格需要在同一单元格分3行显示：

let jsonData = [{color:'orange', price:[100,200, 300]}, {color:'red', price:[100]}]

实现方案 #

用SheetJS（xlsx）库实现，核心逻辑是把数组用Excel识别的单元格内换行符\n拼接成字符串，同时给单元格开启自动换行属性即可。

• 第一步：安装依赖

npm install xlsx
# 如果原版xlsx样式写入不生效，替换为支持样式的兼容版本：npm install xlsx-js-style

• 第二步：编写导出逻辑，完整React示例代码如下

import * as XLSX from 'xlsx';
// 用xlsx-js-style的话替换导入路径即可：import * as XLSX from 'xlsx-js-style'

const handleExport = () => {
  const jsonData = [
    {color:'orange', price:[100,200, 300]}, 
    {color:'red', price:[100]}
  ];

  // 转换数据：price数组用换行符拼接为字符串
  const formatData = jsonData.map(item => ({
    颜色: item.color,
    价格: item.price.join('\n')
  }));

  // 生成工作表
  const ws = XLSX.utils.json_to_sheet(formatData);
  // 获取表格所有单元格范围
  const cellRange = XLSX.utils.decode_range(ws['!ref']);

  // 遍历单元格开启自动换行，保证换行符生效
  for (let col = cellRange.s.c; col <= cellRange.e.c; col++) {
    for (let row = cellRange.s.r; row <= cellRange.e.r; row++) {
      const cellKey = XLSX.utils.encode_cell({ r: row, c: col });
      if (!ws[cellKey]) continue;
      ws[cellKey].s = {
        alignment: {
          wrapText: true,
          vertical: 'top' // 顶部对齐，多行内容显示更自然
        }
      };
    }
  }

  // 生成工作簿并导出
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, '商品价格');
  XLSX.writeFile(wb, '商品价格表.xlsx');
};

export default function ExportBtn() {
  return <button onClick={handleExport}>导出Excel</button>;
}

注意事项 #

• 必须设置wrapText: true，否则\n会被识别为普通空格，所有内容挤在同一行
• 列名可以根据业务需求修改，示例里把color、price转成了中文表头，不需要的话直接保留原字段名即可
• 导出后打开文件就能看到orange对应的价格单元格内，100、200、300自动分为三行展示，和预期效果一致

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