隨著現(xiàn)代技術(shù)的高速發(fā)展，相關(guān)產(chǎn)業(yè)所衍生出來的數(shù)據(jù)集是越來越龐大。那么我們?nèi)绾文軌蚝?jiǎn)單、方便、快捷的展現(xiàn)自己輸入數(shù)據(jù)？并且能夠以我們想要的方式展現(xiàn)出來？報(bào)表——這一產(chǎn)物便應(yīng)運(yùn)而生，現(xiàn)在市面上流行的報(bào)表工具類產(chǎn)品也是層出不窮。

第三方報(bào)表工具是數(shù)據(jù)庫(kù)存儲(chǔ)，數(shù)據(jù)庫(kù)程序通?？梢源娣诺臄?shù)據(jù)量是相當(dāng)大的，可以處理非常復(fù)雜的數(shù)據(jù)結(jié)構(gòu)關(guān)系。報(bào)表數(shù)據(jù)交互也快捷方便，速度也非?？?，可視化交互渲染。

本文介紹如何在單頁(yè)應(yīng)用程序Angular 7中使用FastReport Core Web報(bào)表？

    單頁(yè)應(yīng)用程序的概念正在尋找越來越多的支持者。最著名的單頁(yè)框架之一是Angular，它是一個(gè)單頁(yè) 的JavaScript應(yīng)用程序框架。Angular的第一個(gè)版本基于JavaScript，但是所有后續(xù)版本都已經(jīng)在使用TypeScript，并且與第一個(gè)版 本完全不同。在AngularJS上創(chuàng)建新應(yīng)用程序沒有任何意義，因此我們將使用當(dāng)前版本的Angular 7。

  ;  Microsoft成功地將Angular和ASP結(jié)合起來。Net Core MVC。因此，使用ASP .Net Core MVC的實(shí)現(xiàn) ，在單頁(yè)面應(yīng)用程序中顯示報(bào)表相對(duì)容易。

Node.js安裝

    要在Angular框架上開始開發(fā)，您需要預(yù)先安裝一個(gè)平臺(tái)，以便在服務(wù)器端執(zhí)行JavaScript代碼。它 叫做Node.js。

    您還需要安裝.Net Core SDK 2.0或更新版本。但是，如果您安裝了Microsoft Visual Studio 2017 ，則無需執(zhí)行此操作。

如何創(chuàng)建應(yīng)用程序？

    有兩種方法 - 在Visual Studio中創(chuàng)建新項(xiàng)目或從命令行運(yùn)行命令。

    對(duì)于第一個(gè)選項(xiàng)，您必須在Visual Studio擴(kuò)展中安裝Angular應(yīng)用程序模板。

    第二個(gè)更簡(jiǎn)單。為您的應(yīng)用程序創(chuàng)建一個(gè)文件夾 在Windows命令行中，使用cd命令轉(zhuǎn)到創(chuàng)建的文件 夾并執(zhí)行以下命令：

dotnet new angular -o AngularFRCore

    如您所知，AngularFRCore是項(xiàng)目的名稱。創(chuàng)建應(yīng)用程序后，您需要安裝typescript庫(kù)。我們將使用 Node.js npm平臺(tái)庫(kù)安裝程序執(zhí)行此操作。在控制臺(tái)執(zhí)行了創(chuàng)建應(yīng)用程序的命令，在應(yīng)用程序目錄中運(yùn)行另一個(gè)命令：

npm install -g typescript

    現(xiàn)在，打開項(xiàng)目，沒有解決方案文件，它將在您第一次啟動(dòng)項(xiàng)目時(shí)創(chuàng)建。

    我們的演示應(yīng)用程序的目標(biāo)是展示如何在單頁(yè)應(yīng)用程序中使用FastReport.Core。讓我們將 FastReport庫(kù)添加到我們的項(xiàng)目中。打開NuGet包管理器。在右上角，您可以選擇數(shù)據(jù)包的來源。我們對(duì)本地源感興趣，但首先需要 配置它。為此，請(qǐng)單擊右上角的齒輪圖標(biāo)。我們使用包設(shè)置本地文件夾的路徑：

    默認(rèn)情況下，此文件夾是：C：\ Program Files（x86）\ FastReports \ FastReport.Net \ Nugets。

    通過安裝FastReport.Net，您可以獲得上述包裝中的現(xiàn)成包裝。讓我們回到包管理器：

    ;現(xiàn)在有兩個(gè)包，安裝它們。  要在應(yīng)用程序中使用FastReport，需要在Startup.cs文件中添加 一行代碼：

public void Configure(IApplicationBuilder app, IHostingEnvironment env) 
{ … 
app.UseFastReport();
…}

    如果您瀏覽項(xiàng)目樹，可以從MVC應(yīng)用程序中看到我們熟悉的控制器和模型目錄。可以使用幾乎未改變 的MVC .Net Core應(yīng)用程序作為后端。Controllers文件夾中已有一個(gè) - SampleDataController。隨意清除課程內(nèi)容 - 我們將創(chuàng)建 自己的方法：

[HttpGet("[action]")] 
public IActionResult ShowReport(string name) 
{ WebReport WebReport = new WebReport(); 
WebReport.Width = "1000"; 
WebReport.Height = "1000"; 
WebReport.Report.Load(String.Format("App_Data/{0}.frx", name)); 
// Load the report into the WebReport object System.Data.DataSet dataSet = new System.Data.DataSet(); 
// Create a data source dataSet.ReadXml("App_Data/nwind.xml"); 
// Open the xml database WebReport.Report.RegisterData(dataSet, "NorthWind"); 
// Registering the data source in the report ViewBag.WebReport = WebReport; 
// pass the report to View return View();
 }

    如果您已經(jīng)熟悉FastReport.Core，那么此方法沒有任何新內(nèi)容。我們創(chuàng)建了Web報(bào)表對(duì)象，將報(bào)表 模板加載到其中，創(chuàng)建并注冊(cè)了數(shù)據(jù)源并將報(bào)表傳遞給視圖。此方法有一個(gè)參數(shù) - 我們用于加載所需報(bào)表模板的報(bào)表的名稱。

    FastReport.Net集包含一個(gè)帶有演示報(bào)表的文件夾：

    C：\ Program Files（x86）\ FastReports \ FastReport.Net \ Demos \ Reports

    我們將從中獲取幾個(gè)模板和一個(gè)nwind.xml數(shù)據(jù)庫(kù)。但首先，在項(xiàng)目根目錄中創(chuàng)建App_Data文件夾。 現(xiàn)在從上面的文件夾中將文件拖入其中：

    Barcode.frx，Master-Detail.frx，Matrix.frx，nwind.xml。

    下一步是為此方法創(chuàng)建一個(gè)視圖。

    我們的項(xiàng)目中沒有Views文件夾。在項(xiàng)目根目錄中創(chuàng)建它。在此文件夾中，添加另一個(gè)名為 SampleData的文件夾。最后，在此文件夾中，我們創(chuàng)建了一個(gè)新視圖 - ShowReport.chtml，其中包含以下內(nèi)容：

@await ViewBag.WebReport.Render()

    在異步模式下，我們正在等待生成報(bào)表的HTML版本。

    所以，我們準(zhǔn)備了一個(gè)與Angular一起提供的后端。我們來看看ClientApp文件夾。這是一個(gè)單頁(yè)的 應(yīng)用程序。我們對(duì)src - > app目錄感興趣。以下是負(fù)責(zé)顯示內(nèi)容的主要文件 - 頁(yè)面模板及其類型腳本處理程序。主頁(yè)模板是 app.component.html。我們將完全編輯它：

    FastReport.Core Demo Select a report and click the button    Matrix  Master-Detail  Barcode

    首先，我們?yōu)椴煌膱?bào)表顯示三個(gè)單選按鈕。每個(gè)按鈕都訂閱了Click事件，我們通過該事件設(shè)置報(bào) 表變量的值。該函數(shù)將報(bào)表的名稱作為參數(shù)。通過這種方式，我們組織了所需報(bào)表模板的選擇。這是一個(gè)相當(dāng)原始的實(shí)現(xiàn)，但為了 演示報(bào)表，不再需要它。

    下面，我們展示了一個(gè)名為ShowReport的按鈕，它也使用Clicked（）處理程序訂閱了click事件。 注意條件* ngIf =“show”的div。如果show變量為true，則將執(zhí)行內(nèi)部變量中的代碼。在我們的例子中，將顯示框架。這樣做是為 了在最初加載頁(yè)面時(shí)不顯示空框架。此外，當(dāng)我們選擇報(bào)告并單擊“顯示報(bào)表”按鈕時(shí)，將顯示包含報(bào)表的框架。

    在框架屬性中，我們從變量url設(shè)置源。有趣的是，我們?cè)趕afeUrl函數(shù)的幫助下“規(guī)范化”這個(gè)變 量，并通過管道應(yīng)用它。此函數(shù)將檢查URL的安全性和有效字符，并將其顯示為正確的格式。我們稍后會(huì)詳細(xì)介紹它。

    現(xiàn)在，查看app.component.ts組件腳本，該腳本負(fù)責(zé)處理上面討論的模板：

import { Component } from '@angular/core';  
@Component(
{ selector: 'app-root', 
templateUrl: './app.component.html', 
styleUrls: ['./app.component.css']})
export class AppComponent 
{ title = 'app'; 
show: boolean = false; 
url: string; report: string;  
Clicked() 
{ if (this.report != null) 
{ this.show = true; 
this.url = "api/SampleData/ShowReport?name=" + this.report; 
} }}

    以下是我們?cè)陧?yè)面模板中看到的show和url變量。以及變量報(bào)表，其中包含所選報(bào)表的名稱。 Clicked（）函數(shù)將show變量設(shè)置為true，并在url變量中設(shè)置報(bào)表的路徑。

    現(xiàn)在我們將創(chuàng)建safeUrl函數(shù)，我們?cè)诠艿乐惺褂米兞縰rl。在app目錄文件safeUrl.pipe.ts中：

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser'; 
@Pipe({ name: 'safeUrl' })
export class SafeUrlPipe implements PipeTransform { 
constructor(private sanitizer: DomSanitizer) { } 
transform(url) {
return this.sanitizer.bypassSecurityTrustResourceUrl(url); 
}}

要在頁(yè)面模板中使用此函數(shù)，請(qǐng)?jiān)赼pp.module.ts中添加此管道模塊的聲明：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { SafeUrlPipe } from "./safeUrl.pipe";
import { AppComponent } from './app.component';
 
@NgModule({
 declarations: [
 AppComponent,
 SafeUrlPipe
 ],
 imports: [
 BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
 HttpClientModule,
 FormsModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

這樣就完成了演示應(yīng)用程序的工作。運(yùn)行應(yīng)用程序：

首先，您需要選擇其中一個(gè)報(bào)表，然后單擊按鈕：

現(xiàn)在選擇另一個(gè)報(bào)表并單擊按鈕：

因此，您已經(jīng)看到在Angular單頁(yè)面應(yīng)用程序中使用FastReport.Core報(bào)告生成器并不比通常的ASP .Net Core應(yīng)用程序困難得多 。

如果您對(duì) FastReport 報(bào)表工具感興趣，歡迎加入 FastReport QQ 交流群：702295239