DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現(xiàn)代Web開(kāi)發(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)品更新中引入了一個(gè)全新的GridExporter組件，它在導(dǎo)出過(guò)程中保留了 React Grid 配置，可以輕松地根據(jù)特定的業(yè)務(wù)需求自定義導(dǎo)出，自定義選項(xiàng)包括自定義單元格外觀、頁(yè)眉和頁(yè)腳渲染等。

DevExtreme v22.1正式版下載

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

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

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

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

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

• 排序；
• 過(guò)濾；
• 分組；
• 摘要；
• 選擇。

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

排序和過(guò)濾

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

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

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

分組

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

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

支持多個(gè)組級(jí)別：

選擇

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

摘要

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

自定義導(dǎo)出

單元格自定義

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

頁(yè)眉和頁(yè)腳自定義

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

高級(jí)自定義

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

下面的示例演示了這種方法的實(shí)際應(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      歡迎一起進(jìn)群討論