DevExtreme拥有高性能的HTML5 / JavaScript小部件集合使您可以利用现代Web开发堆栈包括ReactAngularASP.NET CorejQueryKnockout等构建交互式的Web应用程序该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。DevExtreme新旧版本帮助文档下载 可进QQ qun获取169725316现在您可以轻松地将DevExtreme React Grid的数据导出到Excel文档。在之前的产品更新中引入了一个全新的GridExporter组件它在导出过程中保留了 React Grid 配置可以轻松地根据特定的业务需求自定义导出自定义选项包括自定义单元格外观、页眉和页脚渲染等。导出到 Excel 的基本配置要在 React Grid 中启用 Export to Excel 功能您需要使用两个新组件ExportPanel使用‘Export to Excel’按钮在Grid的UI中呈现一个面板GridExporter创建Excel文档并处理导出自定义。数据整型配置根据官方产品团队原生的React产品线理念让您可以完全控制导出的数据和相关的数据整型选项。在 Excel 数据导出过程中您可以应用、跳过或修改以下 Grid 的配置排序过滤分组摘要选择。主要的导出配置原则很简单GridExporter接受与React Grid的状态插件相同的属性让我们回顾一下这是如何工作的。排序和过滤要在导出的 Excel 文档中保留 Grid 的排序和过滤配置只需将 SortingState 插件的 sorting 属性值和 FilteringState 插件的 filters 属性值传递给对应的 GridExporter 属性如下所示Grid … SortingState sorting{sorting} / FilteringState filters{filters} / … /Grid GridExporter … filters{filters} sorting{sorting} /如您所见对导出的文档应用了排序和过滤分组分组行导出如下组标题又名组行占据单独的 Excel 工作表行分组行导出为 Excel 可扩展组。支持多个组级别选择React Grid 允许最终用户仅导出选定的行。 要导出选定的行请将 SelectionState 插件的 selection 属性值传递给 GridExporter。 在这种情况下Export面板会自动呈现两项一项用于导出所有数据或者将导出限制为选定的行。摘要总摘要和组摘要导出为 Excel 公式这可确保在导出的 Excel 文档中修改数据时重新计算摘要。自定义导出单元格自定义使用 GridExporter 的“customizeCell”和“customizeSummaryCell”回调属性来更改单元格值、显示格式或外观。页眉和页脚自定义GridExporter 的“customizeHeader”和“customizeFooter”回调属性允许您添加页眉和页脚。高级自定义在内部GridExporter 使用 ExcelJS 开源库来生成 Excel 文档。 您可以通过处理“onSave”事件来访问正在导出的 ExcelJS 工作簿通过使用 ExcelJS您可以根据需要添加额外的工作表或修改导出的工作表。下面的示例演示了这种方法的实际应用const onSave (workbook) { // modify data here workbook.addWorksheet(My Sheet); workbook.xlsx.writeBuffer().then((buffer) { saveAs(new Blob([buffer], { type: application/octet-stream }), MyWorkbook.xlsx) }); }; ... GridExporter ... onSave{onSave} /