前言
接手了一个其他业务线的项目，第一次遇到这种情况，在某一详情页的表格导出数据，发现导出的数据的序列号列有，但是没数据，效果如下
页面中的表格效果
技术栈
项目前端技术栈版本，不同版本的函数功能和具体表现可能会有差异
- "@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 文件中统一查看
写在最后
不同的场景下，有不同的解决方案，不同的工时下也有对应的处理方式，各位看官都遇到过什么奇怪的导出需求，欢迎在评论区交流
