React使用xlsx导出JSON到Excel时如何填充嵌套Faces数组列

问题根因 #

xlsx 库提供的 json_to_sheet 方法仅支持扁平化的JSON结构，你返回的响应数据中Faces是嵌套对象数组，无法被直接识别转换，因此导出后该列显示为空。

解决方案 #

先对原始响应数据做扁平化预处理，将Faces数组转换为可读的字符串格式，再传入导出函数即可。你可以根据自己的需要调整Faces字段的拼接格式，以下是参考实现：

完整修改代码 #

// 新增：原始数据预处理方法
const preprocessExportData = (rawData) => {
  return rawData.map(record => {
    // 把Faces数组里的内容拼接为字符串，多个项用换行分隔
    const facesContent = record.Faces.map(face => {
      return `图片ID：${face['Image Id']}，匹配分数：${face.Score}`
    }).join('\n')
    return {
      ...record,
      Faces: facesContent
    }
  })
}

const exportToCSV = (csvData, fileName) => {
  const fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
  const fileExtension = '.xlsx';

  const ws = XLSX.utils.json_to_sheet(csvData);

  // 【可选优化】设置列宽，让内容显示更完整
  ws['!cols'] = [
    { wch: 40 }, // Request Id列宽
    { wch: 10 }, // Similar列宽
    { wch: 60 }  // Faces列宽
  ]
  // 【可选优化】设置Faces列自动换行
  const dataRange = XLSX.utils.decode_range(ws['!ref'])
  // 跳过表头，从第二行开始设置
  for (let row = dataRange.s.r + 1; row <= dataRange.e.r; row++) {
    // 第三列是Faces，列索引从0开始计数
    const cell = XLSX.utils.encode_cell({r: row, c: 2})
    if (ws[cell]) {
      ws[cell].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);
}

// 调用时先预处理数据再导出
const processedData = preprocessExportData(response.data)
exportToCSV(processedData, "export")

拓展说明 #

如果你需要把每个Face单独拆成Excel的一行，只需要修改预处理逻辑，把每条原始记录拆成多条对应Faces长度的记录即可，参考预处理代码：

const preprocessExportData = (rawData) => {
  const result = []
  rawData.forEach(record => {
    record.Faces.forEach(face => {
      result.push({
        'Request Id': record['Request Id'],
        'Similar': record.Similar,
        'Image Id': face['Image Id'],
        'Score': face.Score
      })
    })
  })
  return result
}

这个方案导出后会把每个Face拆成独立行，每行会携带对应的Request Id和Similar字段值。

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