如何在單頁應用程序Angular 7中使用FastReport Core Web報表

下載FastReport.Net最新版本

    單頁應用程序的概念正在尋找愈來愈多的支持者。最着名的單頁框架之一是Angular，它是一個單頁 的JavaScript應用程序框架。Angular的第一個版本基於JavaScript，可是全部後續版本都已經在使用TypeScript，而且與第一個版 本徹底不一樣。在AngularJS上建立新應用程序沒有任何意義，所以咱們將使用當前版本的Angular 7。

    Microsoft成功地將Angular和ASP結合起來。Net Core MVC。所以，使用ASP .Net Core MVC的實現 ，在單頁面應用程序中顯示報表相對容易。

Node.js安裝

    要在Angular框架上開始開發，您須要預先安裝一個平臺，以便在服務器端執行JavaScript代碼。它 叫作Node.js。

    您還須要安裝.Net Core SDK 2.0或更新版本。可是，若是您安裝了Microsoft Visual Studio 2017 ，則無需執行此操做。

如何建立應用程序？

    有兩種方法 - 在Visual Studio中建立新項目或從命令行運行命令。

    對於第一個選項，您必須在Visual Studio擴展中安裝Angular應用程序模板。

    第二個更簡單。爲您的應用程序建立一個文件夾 在Windows命令行中，使用cd命令轉到建立的文件 夾並執行如下命令：

dotnet new angular -o AngularFRCore

    如您所知，AngularFRCore是項目的名稱。建立應用程序後，您須要安裝typescript庫。咱們將使用 Node.js npm平臺庫安裝程序執行此操做。在控制檯執行了建立應用程序的命令，在應用程序目錄中運行另外一個命令：

npm install -g typescript

    如今，打開項目，沒有解決方案文件，它將在您第一次啓動項目時建立。

    咱們的演示應用程序的目標是展現如何在單頁應用程序中使用FastReport.Core。讓咱們將 FastReport庫添加到咱們的項目中。打開NuGet包管理器。在右上角，您能夠選擇數據包的來源。咱們對本地源感興趣，但首先須要 配置它。爲此，請單擊右上角的齒輪圖標。咱們使用包設置本地文件夾的路徑：

    默認狀況下，此文件夾是：C：\ Program Files（x86）\ FastReports \ FastReport.Net \ Nugets。

    經過安裝FastReport.Net，您能夠得到上述包裝中的現成包裝。讓咱們回到包管理器：

    如今有兩個包，安裝它們。  要在應用程序中使用FastReport，須要在Startup.cs文件中添加 一行代碼：

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

    若是您瀏覽項目樹，能夠從MVC應用程序中看到咱們熟悉的控制器和模型目錄。可使用幾乎未改變 的MVC .Net Core應用程序做爲後端。Controllers文件夾中已有一個 - SampleDataController。隨意清除課程內容 - 咱們將建立 本身的方法：

[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();
 }

    若是您已經熟悉FastReport.Core，那麼此方法沒有任何新內容。咱們建立了Web報表對象，將報表 模板加載到其中，建立並註冊了數據源並將報表傳遞給視圖。此方法有一個參數 - 咱們用於加載所需報表模板的報表的名稱。

    FastReport.Net集包含一個帶有演示報表的文件夾：

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

    咱們將從中獲取幾個模板和一個nwind.xml數據庫。但首先，在項目根目錄中建立App_Data文件夾。 如今從上面的文件夾中將文件拖入其中：

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

    下一步是爲此方法建立一個視圖。

    咱們的項目中沒有Views文件夾。在項目根目錄中建立它。在此文件夾中，添加另外一個名爲 SampleData的文件夾。最後，在此文件夾中，咱們建立了一個新視圖 - ShowReport.chtml，其中包含如下內容：

@await ViewBag.WebReport.Render()

    在異步模式下，咱們正在等待生成報表的HTML版本。

    因此，咱們準備了一個與Angular一塊兒提供的後端。咱們來看看ClientApp文件夾。這是一個單頁的 應用程序。咱們對src - > app目錄感興趣。如下是負責顯示內容的主要文件 - 頁面模板及其類型腳本處理程序。主頁模板是 app.component.html。咱們將徹底編輯它：

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

    首先，咱們爲不一樣的報表顯示三個單選按鈕。每一個按鈕都訂閱了Click事件，咱們經過該事件設置報 表變量的值。該函數將報表的名稱做爲參數。經過這種方式，咱們組織了所需報表模板的選擇。這是一個至關原始的實現，但爲了 演示報表，再也不須要它。

    下面，咱們展現了一個名爲ShowReport的按鈕，它也使用Clicked（）處理程序訂閱了click事件。 注意條件* ngIf =「show」的div。若是show變量爲true，則將執行內部變量中的代碼。在咱們的例子中，將顯示框架。這樣作是爲 了在最初加載頁面時不顯示空框架。此外，當咱們選擇報告並單擊「顯示報表」按鈕時，將顯示包含報表的框架。

    在框架屬性中，咱們從變量url設置源。有趣的是，咱們在safeUrl函數的幫助下「規範化」這個變 量，並經過管道應用它。此函數將檢查URL的安全性和有效字符，並將其顯示爲正確的格式。咱們稍後會詳細介紹它。

    如今，查看app.component.ts組件腳本，該腳本負責處理上面討論的模板：

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; 
} }}

    如下是咱們在頁面模板中看到的show和url變量。以及變量報表，其中包含所選報表的名稱。 Clicked（）函數將show變量設置爲true，並在url變量中設置報表的路徑。

    如今咱們將建立safeUrl函數，咱們在管道中使用變量url。在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); 
}}

要在頁面模板中使用此函數，請在app.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 { }

這樣就完成了演示應用程序的工做。運行應用程序：

首先，您須要選擇其中一個報表，而後單擊按鈕：

如今選擇另外一個報表並單擊按鈕：

所以，您已經看到在Angular單頁面應用程序中使用FastReport.Core報告生成器並不比一般的ASP .Net Core應用程序困可貴多 。

---

相關連接：

• fastrepot.net最新試用版下載
• fastreport中文網
• FastReport最新中文用戶手冊火熱上線，速來下載！！！