DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現(xiàn)代Web開發(fā)堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構(gòu)建交互式的Web應(yīng)用程序，該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

現(xiàn)在，您可以輕松地將DevExtreme React Grid的數(shù)據(jù)導(dǎo)出到Excel文檔。

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

DevExtreme v22.1正式版下載

導(dǎo)出到 Excel 的基本配置

要在 React Grid 中啟用 Export to Excel 功能，您需要使用兩個新組件：

• ExportPanel使用‘Export to Excel’按鈕在Grid的UI中呈現(xiàn)一個面板；
• GridExporter創(chuàng)建Excel文檔并處理導(dǎo)出自定義。

數(shù)據(jù)整型配置

根據(jù)官方產(chǎn)品團隊原生的React產(chǎn)品線理念，讓您可以完全控制導(dǎo)出的數(shù)據(jù)和相關(guān)的數(shù)據(jù)整型選項。在 Excel 數(shù)據(jù)導(dǎo)出過程中，您可以應(yīng)用、跳過或修改以下 Grid 的配置：

• 排序；
• 過濾；
• 分組；
• 摘要；
• 選擇。

主要的導(dǎo)出配置原則很簡單，GridExporter接受與React Grid的狀態(tài)插件相同的屬性，讓我們回顧一下這是如何工作的。

排序和過濾

要在導(dǎo)出的 Excel 文檔中保留 Grid 的排序和過濾配置，只需將 SortingState 插件的 `sorting` 屬性值和 FilteringState 插件的 `filters` 屬性值傳遞給對應(yīng)的 GridExporter 屬性，如下所示：

<Grid>
…
<SortingState sorting={sorting} />
<FilteringState filters={filters} />
…
</Grid>
<GridExporter
…
filters={filters}
sorting={sorting}
/>

如您所見，對導(dǎo)出的文檔應(yīng)用了排序和過濾：

分組

分組行導(dǎo)出如下：

• 組標(biāo)題（又名組行）占據(jù)單獨的 Excel 工作表行；
• 分組行導(dǎo)出為 Excel 可擴展組。

支持多個組級別：

選擇

React Grid 允許最終用戶僅導(dǎo)出選定的行。 要導(dǎo)出選定的行，請將 SelectionState 插件的 `selection` 屬性值傳遞給 GridExporter。 在這種情況下，Export面板會自動呈現(xiàn)兩項：一項用于導(dǎo)出所有數(shù)據(jù)，或者將導(dǎo)出限制為選定的行。

摘要

總摘要和組摘要導(dǎo)出為 Excel 公式，這可確保在導(dǎo)出的 Excel 文檔中修改數(shù)據(jù)時重新計算摘要。

自定義導(dǎo)出

單元格自定義

 使用 GridExporter 的“customizeCell”和“customizeSummaryCell”回調(diào)屬性來更改單元格值、顯示格式或外觀。

頁眉和頁腳自定義

GridExporter 的“customizeHeader”和“customizeFooter”回調(diào)屬性允許您添加頁眉和頁腳。

高級自定義

在內(nèi)部，GridExporter 使用 ExcelJS 開源庫來生成 Excel 文檔。 您可以通過處理“onSave”事件來訪問正在導(dǎo)出的 ExcelJS 工作簿，通過使用 ExcelJS，您可以根據(jù)需要添加額外的工作表或修改導(dǎo)出的工作表。

下面的示例演示了這種方法的實際應(yīng)用：

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技術(shù)交流群6：600715373      歡迎一起進群討論