React中导出含嵌套数组的复杂JSON为.xlsx：如何展示products数据

XLSX库的json_to_sheet方法默认无法处理嵌套的数组/对象结构，会直接忽略这类字段或输出无意义的[object Object]，导致你的products数据无法正常显示。要解决这个问题，只需先预处理原始数据，将嵌套的products数组转换为适合单元格显示的字符串格式，再执行导出操作。

具体实现方案 #

1. 预处理数据 #

遍历原始数据，将每个对象的products字段转换为可读字符串，你可以根据需求选择以下格式：

• 格式1：保留完整结构（JSON字符串）
  适合需要保留产品ID和名称完整结构的场景：

  const processedData = stockOpnameData.map(item => ({
    ...item,
    products: JSON.stringify(item.products)
  }))
  

• 格式2：自定义易读格式（换行/逗号分隔）
  适合需要直观查看产品信息的场景，比如换行显示每个产品的ID和名称：

  const processedData = stockOpnameData.map(item => ({
    ...item,
    products: item.products.map(p => `${p.id} - ${p.name}`).join('\n')
  }))
  

2. 修改导出函数（可选：加入自动换行优化） #

如果选择换行分隔的格式，可以在导出时设置单元格自动换行，提升可读性：

import * as FileSaver from 'file-saver'
import * as XLSX from 'xlsx'

const fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
const fileExtension = '.xlsx'

export const exportToExcel = (csvData: any[], fileName: string) => {
  // 预处理数据，转换products字段为自定义格式
  const processedData = csvData.map(item => ({
    ...item,
    products: item.products.map(p => `${p.id} - ${p.name}`).join('\n')
  }))

  const ws = XLSX.utils.json_to_sheet(processedData)

  // 设置products列单元格自动换行（假设products是第二列，索引为1）
  const range = XLSX.utils.decode_range(ws['!ref'] || '')
  for (let i = range.s.r + 1; i <= range.e.r; i++) {
    const cellAddr = XLSX.utils.encode_cell({ r: i, c: 1 })
    if (ws[cellAddr]) {
      ws[cellAddr].s = { alignment: { wrapText: true } }
    }
  }

  const wb = { Sheets: { data: ws }, SheetNames: ['data'] }
  const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
  const data = new Blob([excelBuffer], { type: fileType })

  FileSaver.saveAs(data, fileName + fileExtension)
}

3. 调用导出函数 #

直接传入预处理后的数据即可：

exportToExcel(processedData, 'stock_opname')

这样处理后，products数据会完整显示在对应的单元格中，无需拆分到其他表格。

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