DevExtreme导出Excel序号列数据没了😕

前言

接手了一个其他业务线的项目，第一次遇到这种情况，在某一详情页的表格导出数据，发现导出的数据的序列号列有，但是没数据，效果如下

页面中的表格效果

技术栈

项目前端技术栈版本，不同版本的函数功能和具体表现可能会有差异

• "@angular/core": "~8.1.0",
• "devextreme-angular": "20.1.8",
• "xlsx": "^0.16.9"

代码分析

下面是 html 代码，去除了实际业务上的属性等设置，只留下了必要的部分，当前表格使用 DevExtreme UI 原生的 dx-data-grid

<dx-data-grid
  [dataSource]="detailSource"
>
  <dxi-column caption="序号" dataField="IDENTITY_RECORD" [cellTemplate]="identityRecordCellTemplate"></dxi-column>
  <template *ngFor="let item of detailSourceArr">
    <dxi-column
      [caption]="item.caption"
      [dataField]="item.dataField"
    >
    </dxi-column>
  </template>
</dx-data-grid>

序号 列的实现为自定义的 column 列，使用 cellTemplate 属性(自定义单元格模板)实现序号的数据的排列

identityRecordCellTemplate(cellElement, cellInfo) {
  cellElement.innerText = parseInt(cellInfo.rowIndex) + 1 + parseInt(cellInfo.component.pageSize()) * parseInt(cellInfo.component.pageIndex());
}

导出函数使用的官方 data-grid 提供的内置导出函数 exportToExcel

this.detailGrid.instance.exportToExcel(false);

原因分析

可能官方 data-grid 导出函数不支持这种自定义的序号数据

解决方案

从快速解决问题的解决方式上来看，可以从下面两个思路进行

1. 使用普通列，内置函数导出

不使用 cellTemplate 属性的方式，在 detailSourceArr 的列配置中添加一个 RECORD_ID 列，这个列就是一个普通的数据集中的列，只是序号是手动绑定的，在表格绑定的数据集中添加 RECORD_ID 列序号数据，这里需要手动处理一下表格绑定的数据，如下

detailSource.forEach((v, i) => {
  v['RECORD_ID'] = i + 1
})

这样 exportToExcel 导出的数据就正常了

小结

官方内置的这种导出方式情况适用于表格不做自定义处理，简单展示的那种情况，表格展示什么样子，导出就是什么样子

2. 自定义JSON数据导出

先获取表格数据，此时的表格数据集中没有序号列，手动添加序列号列数据

detailSource.forEach((v, i) => {
  v['RECORD_ID'] = i + 1
})

然后再配置对应表格表头数据，把配置好的表头 tableHeader 处理后的 tableData 数据导出成 Excel，这个要用到 xlsx 库的能力，exportJson2Excel 是封装好的一个函数，具体封装代码可查看 这里， 这个项目可以在线操作，也可以 clone 到本地运行分析代码运行情况

exportJson2Excel(tableHeader, tableData, 'filename')

小结

这种方案稍微麻烦点，需要单独引入对应的第三方库，数据有时需要单独拼接处理，但是这种方式灵活性更强，适合导出各种表格自定义的情况

例如表格最后一列内容为 查看详情 按钮，点击按钮弹出一个框，里面内容为当前行数据的详情数据，需要导出当前表格的展示数据，以及表格行数据中的详情数据，也拼接到 Excel 表格列后面，在 Excel 文件中统一查看

写在最后

不同的场景下，有不同的解决方案，不同的工时下也有对应的处理方式，各位看官都遇到过什么奇怪的导出需求，欢迎在评论区交流

如果文章感觉有用，随手点个赞再走呗 ^_^ 🥰🥰

微信公众号：草帽Lufei