使用ExcelService导出对象数组时，如何导出数组类型字段至同一列？

现有如下对象数组：

listTutors = [{
  countryId: 'tt',
  gender: 'both',
  levelId: 'tg',
  sessionType: 'inPerson',
  dashboardStatus: ['notPublished', 'published', 'external'],
  subjectId: 'n',
}];

使用自定义ExcelService类导出为XLSX文件的代码如下：

public exportAsExcelFile(json: any[], excelFileName: string): void {
  const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
  const workbook: XLSX.WorkBook = {
    Sheets: { data: worksheet },
    SheetNames: ['data'],
  };
  const excelBuffer: any = XLSX.write(workbook, {
    bookType: 'xlsx',
    type: 'array',
  });
  this.saveAsExcelFile(excelBuffer, excelFileName);
}

private saveAsExcelFile(buffer: any, fileName: string): void {
  const data: Blob = new Blob([buffer], { type: EXCEL_TYPE });
  fileSaver.saveAs(
    data,
    fileName + '_export_' + new Date().getMonth() + EXCEL_EXTENSION
  );
}

导出结果中dashboardStatus数组字段未被导出，需要将数组中的内容合并到同一列中显示。

方案一：预处理数据转换数组为字符串 #

XLSX.utils.json_to_sheet默认不会解析数组类型的字段，所以在生成工作表前，先遍历数据将数组转为逗号分隔的字符串即可：

public exportAsExcelFile(json: any[], excelFileName: string): void {
  // 预处理数据，把数组字段转为字符串
  const processedData = json.map(item => ({
    ...item,
    dashboardStatus: item.dashboardStatus?.join(', ') // 用逗号分隔数组元素
  }));

  const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(processedData);
  const workbook: XLSX.WorkBook = {
    Sheets: { data: worksheet },
    SheetNames: ['data'],
  };
  const excelBuffer: any = XLSX.write(workbook, {
    bookType: 'xlsx',
    type: 'array',
  });
  this.saveAsExcelFile(excelBuffer, excelFileName);
}

方案二：手动构建表头与数据行 #

如果需要更精准的控制导出内容，可以手动定义表头和对应的数据行，确保数组字段被正确处理：

public exportAsExcelFile(json: any[], excelFileName: string): void {
  // 定义导出的表头
  const headers = [
    'countryId', 'gender', 'levelId', 'sessionType', 'dashboardStatus', 'subjectId'
  ];
  // 转换每一行数据，将数组转为字符串
  const rows = json.map(item => [
    item.countryId,
    item.gender,
    item.levelId,
    item.sessionType,
    item.dashboardStatus?.join(', '),
    item.subjectId
  ]);

  // 从二维数组创建工作表
  const worksheet: XLSX.WorkSheet = XLSX.utils.aoa_to_sheet([headers, ...rows]);
  const workbook: XLSX.WorkBook = {
    Sheets: { data: worksheet },
    SheetNames: ['data'],
  };
  const excelBuffer: any = XLSX.write(workbook, {
    bookType: 'xlsx',
    type: 'array',
  });
  this.saveAsExcelFile(excelBuffer, excelFileName);
}

额外说明 #

• 如果需要在单元格内换行显示数组元素，可以将分隔符换成'\n'，并在Excel中开启单元格自动换行功能。
• 若存在dashboardStatus为undefined的情况，可选添加默认值，比如item.dashboardStatus?.join(', ') || '无状态'。

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