在React.js中如何将嵌套对象数组导出为xlsx格式文件

方案1：适配现有react-export-data包 #

react-export-data本身只支持扁平数组结构的数据源，你只需要先把嵌套数据做扁平化处理即可适配使用：

步骤1：数据预处理 #

将外层公共字段和内层registry_driver数组的每一项做合并，生成扁平结构的导出数组：

const test = {
  // 你的原始数据
}

// 扁平化处理函数
const getExportData = (raw) => {
  // 提取所有行通用的外层字段
  const commonInfo = {
    id: raw.id,
    office: raw.office,
    full_name: raw.full_name,
    model_car: raw.model_car,
    number_car: raw.number_car
  }
  // 合并内层行程数据，返回扁平数组
  return raw.registry_driver.map(driverItem => ({
    ...commonInfo,
    ...driverItem,
    // 空对象字段不需要可以直接删除
    num_card: undefined,
    num_check: undefined
  }))
}

const finalExportData = getExportData(test)

步骤2：配置导出列 #

按照你需要的表头顺序配置列映射即可直接调用react-export-data的导出方法：

const exportColumns = [
  { label: "编号", key: "id" },
  { label: "所属办公室", key: "office" },
  { label: "司机姓名", key: "full_name" },
  { label: "车型", key: "model_car" },
  { label: "车牌号", key: "number_car" },
  { label: "行程日期", key: "date" },
  { label: "星期", key: "name_weekday" },
  { label: "初始油量", key: "start_fuel" },
  { label: "加油量", key: "flooded_fuel" },
  { label: "行驶里程", key: "milage" },
  { label: "油费", key: "costs_fuel" },
  { label: "剩余油量", key: "end_fuel" }
]

方案2：需要实现单元格合并/复杂表头用xlsx库 #

如果你的导出效果需要实现截图里相同内容单元格合并、分组表头这类复杂样式，react-export-data能力不足，可以替换为xlsx（SheetJS）库实现，处理逻辑和上面一致：先做数据扁平化，再根据需要配置单元格合并规则、自定义表头即可。

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