DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序，該套件附帶功能齊全的數據網格、交互式圖表小部件、數據編輯器等。

現在，您可以輕松地將DevExtreme React Grid的數據導出到Excel文檔。

在之前的產品更新中引入了一個全新的GridExporter組件，它在導出過程中保留了 React Grid 配置，可以輕松地根據特定的業務需求自定義導出，自定義選項包括自定義單元格外觀、頁眉和頁腳渲染等。

DevExtreme v22.1正式版下載

導出到 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}
/>

DevExpress技術交流群6：600715373      歡迎一起進群討論