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

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

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

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

在上文中（），我們?yōu)榇蠹医榻B了DevExpress Visual Studio Code報(bào)表設(shè)計(jì)器擴(kuò)展、基于VS Code擴(kuò)展的技術(shù)以及一些前期配置等。本文將繼續(xù)介紹如何創(chuàng)建一個(gè)新的DevExpress報(bào)表，歡迎持續(xù)關(guān)注我們哦~

創(chuàng)建一個(gè)新的DevExpress報(bào)表

此時(shí)我們準(zhǔn)備向示例項(xiàng)目中添加一個(gè)新報(bào)表，擴(kuò)展增加一個(gè)新的DX Reporting: New Report命令到Visual Studio代碼中，只需再次按F1來(lái)使用該命令并指定新的報(bào)表名稱。

VS Code將自動(dòng)打開新創(chuàng)建的報(bào)表，并以空白報(bào)表呈現(xiàn)DevExpress報(bào)表設(shè)計(jì)器：

在此階段，我們可以向該報(bào)表添加數(shù)據(jù)源，并使用內(nèi)置的報(bào)表向?qū)?duì)其進(jìn)行設(shè)計(jì)。我們將選擇右側(cè)的數(shù)據(jù)源選項(xiàng)卡，然后點(diǎn)擊"Add Data Source"按鈕調(diào)用數(shù)據(jù)源向?qū)В?

出于本示例的目的，我們將使用之前在reporting.config.file中設(shè)置的示例 "Dummy 100 Users"JSON數(shù)據(jù)源，選擇可用的數(shù)據(jù)源，點(diǎn)擊“Finish”完成操作：

接下來(lái)，我們將導(dǎo)航到報(bào)表設(shè)計(jì)器主菜單，并在報(bào)表向?qū)е羞x擇Design in Report Wizard...來(lái)啟動(dòng)報(bào)表向?qū)В?

我們將按照向?qū)崾就瓿蓤?bào)表生成過(guò)程，如果您遵循這篇文章，請(qǐng)確保使用“Save”快捷鍵保存報(bào)表模板文件(在macOS中是Command+ S)。當(dāng)您這樣做時(shí)，可以在屏幕上看到以下內(nèi)容：

要查看結(jié)果，只需要按下"Preview" 按鈕，您可以從內(nèi)置的打印預(yù)覽窗口打印和導(dǎo)出報(bào)表文檔：

運(yùn)行示例應(yīng)用程序

在這個(gè)階段，我們必須修改一些項(xiàng)目代碼文件，以便在運(yùn)行時(shí)將這個(gè)報(bào)表布局加載到XtraReport類中。首先我們必須移動(dòng) "newReport. repx" 文件到PredefinedReports目錄中，完成后我們需要進(jìn)行以下更改：

HomeController.cs -> Viewer method

將在文檔查看器中打開的報(bào)表名稱更改為newReport：

public IActionResult Viewer([FromServices] IWebDocumentViewerClientSideModelGenerator clientSideModelGenerator,
[FromQuery] string reportName) {

var reportToOpen = string.IsNullOrEmpty(reportName) ? "newReport" : reportName;
var model = new Models.ViewerModel {
ViewerModelToBind = clientSideModelGenerator.GetModel(reportToOpen, WebDocumentViewerController.DefaultUri)
};
return View(model);
}

ReportsFactory.cs

替換如下代碼，從PredefinedReports目錄加載報(bào)表模板：

public static class ReportsFactory
{
public static string ReportsPath { get; set; }
public static Dictionary<string, Func<XtraReport>> Reports = new Dictionary<string, Func<XtraReport>>()
{
["TestReport"] = () => new TestReport(),
["newReport"] = () => XtraReport.FromFile(Path.Combine(ReportsPath + "/PredefinedReports/newReport.repx"))
};

}

Startup.cs

修改類構(gòu)造函數(shù)來(lái)將IWebEnvironment.ContnetRootPath變量傳遞到ReportsFactory類：

public Startup(IConfiguration configuration, IWebHostEnvironment environment) {
Configuration = configuration;
ReportsFactory.ReportsPath = environment.ContentRootPath;
AppDomain.CurrentDomain.SetData("DataDirectory", environment.ContentRootPath);
}

ReportDbContext.cs -> InitializeDatabase method

將JSON數(shù)據(jù)源添加到應(yīng)用程序注冊(cè)的數(shù)據(jù)源集合中：

...
var Dummy100UsersConnectionName = "Dummy 100 Users";
if(!JsonDataConnections.Any(x => x.Name == Dummy100UsersConnectionName)) {
var newData = new JsonDataConnectionDescription {
Name = Dummy100UsersConnectionName,
DisplayName = "Dummy 100 Users",
ConnectionString = "Uri=//dummyjson.com/users/"
};
JsonDataConnections.Add(newData);
}
...

最后，我們需要確保在每次構(gòu)建應(yīng)用程序時(shí)將報(bào)表模板文件復(fù)制到應(yīng)用程序輸出目錄中。要實(shí)現(xiàn)這一點(diǎn)，我們需要再"*. csproj"文件中添加以下內(nèi)容：

<ItemGroup>
<None Remove="PredefinedReports\*.repx" />
</ItemGroup>
<ItemGroup>
<Content Include="PredefinedReports\newReport.repx">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
</ItemGroup>

通過(guò)這些修改，我們可以切換到VS Code中的終端窗口并運(yùn)行Docker容器：

export DX_NUGET=//nuget.devexpress.com/Your_API_Token/api
DOCKER_BUILDKIT=1 docker build -t reporting-app --secret id=dxnuget,env=DX_NUGET .
docker run -p 8080:80 reporting-app:latest

應(yīng)用程序頁(yè)面可通過(guò)以下URL訪問(wèn)：//localhost:8080/，點(diǎn)擊頂部的 "Document Viewer"鏈接顯示剛剛在Visual Studio Code中創(chuàng)建的報(bào)表打印預(yù)覽。