react-bootstrap-table导出CSV显示[Object] 如何正确导出数据与列名

react-bootstrap-table v4版本的CSV导出逻辑，存在两个容易踩的坑：

• 默认导出时不会复用列配置中dataFormat方法的处理结果，直接读取dataField映射的原始数据源值
• 对非基础类型的对象、数组类值，直接执行字符串序列化就会输出[Object]

• 为每个有自定义展示逻辑的列，补充专属的csvFormat属性配置，该属性绑定的方法仅在CSV导出时触发，不会干扰页面上的正常渲染逻辑
• 解决同列重复绑定dataField的问题：当前代码中Asset Name和asset Code两列都绑定了dataField="assetId"，会导致导出时取数混乱，需要在csvFormat方法中从整行数据里明确提取对应嵌套字段，匹配正确的列名
• 核对所有dataField的拼写，比如当前代码中的assetCodition属于拼写偏差，会导致读取不到嵌套字段的正确值，引发导出异常

修改后的列配置参考：

<BootstrapTable
  data={this.state.auditActivityData}
  version="4"
  striped
  hover
  pagination
  search
  exportCSV={true}
  options={DatatableOptions}
>
  <TableHeaderColumn
    dataField="comment_images"
    dataFormat={this.fileHandle.bind(this)}
    // 新增CSV专属格式化方法，将图片列表转成可读字符串
    csvFormat={(cellValue) => {
      return cellValue?.map(img => img.fileName).join('、') || '无附件'
    }}
    dataSort
    width="75"
  >
    Files
  </TableHeaderColumn>

  <TableHeaderColumn
    isKey
    dataField="auditId"
    dataFormat={this.auditdata.bind(this)}
    // 同步配置导出用的格式化逻辑
    csvFormat={(cellValue, row) => row.auditName || cellValue}
    dataSort
  >
    Audit Name
  </TableHeaderColumn>

  <TableHeaderColumn
    dataField="assetId"
    dataFormat={this.AssetName.bind(this)}
    // 导出时从嵌套asset对象中取资产名称字段
    csvFormat={(cellValue, row) => row.asset?.assetName || ''}
    dataSort
  >
    Asset Name
  </TableHeaderColumn>

  <TableHeaderColumn
    dataField="assetId"
    dataFormat={this.assetcode.bind(this)}
    // 同dataField下导出取资产编码字段
    csvFormat={(cellValue, row) => row.asset?.assetCode || ''}
  >
    asset Code
  </TableHeaderColumn>

  <TableHeaderColumn
    dataField="comment"
  >
    Comments
  </TableHeaderColumn>

  <TableHeaderColumn
    dataField="commentedBy"
    dataFormat={this.auditedBy.bind(this)}
    csvFormat={(cellValue, row) => row.commentedByUser?.fullName || cellValue}
  >
    Auditor
  </TableHeaderColumn>

  <TableHeaderColumn
    dataField="assetAvailability"
    dataFormat={this.assetAvailability.bind(this)}
    thStyle={{ whiteSpace: "normal" }}
    csvFormat={(cellValue) => cellValue ? '可用' : '不可用'}
  >
    Asset Availability
  </TableHeaderColumn>

  <TableHeaderColumn
    dataField="assetCondition"
    dataFormat={this.AssetCondition.bind(this)}
    thStyle={{ whiteSpace: "normal" }}
    csvFormat={(cellValue) => cellValue}
  >
    Asset Condition
  </TableHeaderColumn>
</BootstrapTable>

• csvFormat方法的入参与dataFormat完全一致：第一个参数是当前列dataField对应的原始值，第二个参数是整行的完整数据源对象，可直接读取嵌套对象的任意字段
• 不需要提前在前端把嵌套数据拍平成冗余的基础字段，csvFormat会在导出流程中实时取值处理，不增加页面渲染的性能负担
• 如需自定义导出的列名、列顺序，可在BootstrapTable的options配置中增加csvColumn选项，手动指定导出的列集合

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