DevExpress Reporting是.NET Framework下功能完善的報表平臺，它附帶了易于使用的Visual Studio報表設(shè)計器和豐富的報表控件集，包括數(shù)據(jù)透視表、圖表，因此您可以構(gòu)建無與倫比、信息清晰的報表。

DevExpress Reports — 跨平臺報表組件，允許用戶在針對任何基于.NET平臺的應(yīng)用程序中生成報表文檔，可部署在任何支持的操作系統(tǒng)上。在過去的幾個月里，官方技術(shù)團(tuán)隊一直專注于增強(qiáng)多個環(huán)境中的報表生成進(jìn)程，同時保持與主機(jī)操作系統(tǒng)本身的獨(dú)立性。在我們深入研究細(xì)節(jié)之前，先簡單介紹一下Visual Studio Code，以及為什么選擇它而不是其他可用的替代品。

獲取DevExpress Reporting v23.1正式版下載

DevExpress技術(shù)交流群9：909157416      歡迎一起進(jìn)群討論

在過去的三年里，Visual Studio Code (VS Code)一直是全球開發(fā)者社區(qū)成員首選的IDE(這個結(jié)論是基于Stack Overflow開發(fā)者調(diào)查)。廣泛采用是我們選擇VS Code的一個原因，另一個是微軟最近關(guān)于的公告。

DevExpress Visual Studio Code報表設(shè)計器擴(kuò)展

VS Code報表設(shè)計器擴(kuò)展允許您在Visual Studio Code IDE中創(chuàng)建和編輯DevExpress報表文檔，在本文中，我們將指導(dǎo)您完成macOS上的安裝過程，并說明如何利用該擴(kuò)展的功能來開發(fā)和修改現(xiàn)有的報告。

注意：當(dāng)前DevExpress VS Code擴(kuò)展是社區(qū)技術(shù)預(yù)覽版(CTP)。

基于VS Code擴(kuò)展的技術(shù)

如果您在過去的Web應(yīng)用程序中加入了DevExpress Reporting工具，會發(fā)現(xiàn)DevExpress Web Report Designer（報表設(shè)計器）和VS Code擴(kuò)展之間的相似之處。

Web報表設(shè)計器是使用JavaScript實現(xiàn)的，服務(wù)器端邏輯在 .NET 中執(zhí)行。我們將這個設(shè)計器集成到Visual Studio Code中，允許后端在使用后端配置文件打開工作空間時安靜地運(yùn)行。當(dāng)您雙擊*. REPX (報表模板文件)，一個新的IDEdock面板呈現(xiàn)網(wǎng)頁與報表設(shè)計器，這個實現(xiàn)是基于.NET 7的，并且利用了我們基于sky的跨平臺繪圖引擎(允許您在IDE中預(yù)覽報表文檔)。

先決條件

下面是您需要在機(jī)器上執(zhí)行的DevExpress VS Code報表設(shè)計器相關(guān)的東西：

在本文的以下部分中，我們將使用Docker來展示運(yùn)行的結(jié)果。以示例項目的形式提供各種預(yù)配置的Dockerfiles：。我們創(chuàng)建這些Dockerfiles是為了解決開發(fā)和部署過程中的潛在挑戰(zhàn)，從這些文件創(chuàng)建的Docker容器在初始化期間安裝所有必要的本地庫。

要在VS Code中顯示文檔打印預(yù)覽，或者如果在本地macOS/Linux上開發(fā)/執(zhí)行報告，請確保在您的開發(fā)機(jī)器上安裝所有本地依賴項(在macOS上，您必須使用homebrew)：

• libicu
• libc
• fontconfit
• libjpeg

設(shè)置

下載擴(kuò)展并指定相關(guān)設(shè)置

一旦您確認(rèn)機(jī)器滿足所有先決條件：

• 在Visual Studio Code extensions選項卡中搜索擴(kuò)展來安裝它：

• 或者使用下面的Visual Studio Code市場鏈接來下載*. VSIX文件的DevExpress VS Code Report Designer Extension（報表設(shè)計器擴(kuò)展）：.，獲得文件后，打開VS Code并導(dǎo)航到extensions選項卡。單擊結(jié)束省略號圖標(biāo)來顯示其上下文菜單，然后選擇“Install from VSIX…”：

安裝擴(kuò)展后，單擊右下角的齒輪圖標(biāo)來修改設(shè)置：

1. 輸入您的
2. 選擇報表設(shè)計器可視主題(在此處查看可用主題列表：)。
3. 版本設(shè)置保持默認(rèn)值。

準(zhǔn)備好環(huán)境

注意：您可以使用自己的示例項目或在Visual Studio Code中打開一個空文件夾來測試功能。

我們將利用以下GitHub存儲庫用于演示目的：。按照本文的步驟，點擊F1，輸入git clone，并提供VS Code的存儲庫URL，將它復(fù)制到您的機(jī)器上。在Visual Studio Code中打開目錄(包含示例項目)后，將新的Reporting .config.json文件添加到其中，或者使用DX Reporting: Start Designer VS Code命令生成該文件。

擴(kuò)展在后端進(jìn)程啟動之前讀取該文件的內(nèi)容，請參閱下面支持的報表設(shè)計器設(shè)置列表：

• DataBindingMode (Expressions | DataBindings | ExpressionsAdvanced) - 設(shè)置報表設(shè)計器數(shù)據(jù)綁定模式。
• SqlConnectionStrings - 定義可用的基于SQL的數(shù)據(jù)源集合，確保在連接字符串中使用XpoProvider前綴。
• JsonConnectionStrings - 定義可用JSON數(shù)據(jù)源的集合。
• ReportsDirectory - 存儲包含報表模板的目錄路徑。
• ReportUrlsMap - 存儲與報表模板文件關(guān)聯(lián)的報表名稱集合。

一個示例配置文件如下所示：

{
"DataBindingMode": "Expressions",
"SqlConnectionStrings":{
"Northwind_Connection": "XpoProvider=MSSqlServer;...."
},
"JsonConnectionStrings":{
"Nwind JSON Data": "Uri=nwind.json",
"Dummy 100 Users": "Uri=//dummyjson.com/users/"
},
"ReportsDirectory" : "PredefinedReports",
"ReportUrlsMap":{
"Report1": "Report1.repx",
"newReport": "newReport.repx"
}
}

將文件添加到打開的目錄后，重新打開VS Code以初始化報表設(shè)計器擴(kuò)展，或者手動調(diào)用DX Reporting: Start Designer命令，IDE將通知您有關(guān)報表設(shè)計器初始化的信息。

在接下來的文章中我們將繼續(xù)介紹如何創(chuàng)建DevExpress報表及運(yùn)行實例應(yīng)用程序，請持續(xù)關(guān)注我們喲~