FastReport教程：如何在單頁應(yīng)用程序Angular 7中使用Web報(bào)表

下載FastReport.Net最新版本

如果您在ASP.Net Core應(yīng)用程序中使用FastReport.Net并希望切換到單頁應(yīng)用程序（SPA），那么本文適合您。 由于Angular和ASP.Net Core的共生，您可以使用您熟悉的MVC應(yīng)用程序架構(gòu)。

我們來看看創(chuàng)建SPA應(yīng)用程序的方法。這對(duì)那些剛剛學(xué)習(xí)Angular的人很有用。要使用Angular，您需要安裝Node.js，這是一個(gè)在服務(wù)器端執(zhí)行JavaScript代碼的平臺(tái)。 最簡(jiǎn)單的方法是從開發(fā)人員的網(wǎng)站//nodejs.org/en/下載安裝程序。 它還需要.Net Core SDK 2.0或更新版本。 如果安裝了Microsoft Visual Studio 2017，則已安裝SDK。

現(xiàn)在我們?cè)谒璧奈恢脼槲覀兾磥淼膽?yīng)用程序創(chuàng)建一個(gè)文件夾。運(yùn)行命令提示符。使用cd命令轉(zhuǎn)到創(chuàng)建的目錄。我們執(zhí)行命令：

dotnet new angular -o SPAWebReport

此命令將創(chuàng)建一個(gè)三頁的演示應(yīng)用程序。

打開創(chuàng)建的項(xiàng)目。首先，我們需要在NuGet管理器中安裝其他軟件包：

FastReport.Core和FastReport.Web包可以在FastReport.Net安裝目錄的NuGet文件夾中找到。要安裝這些軟件包，您需要設(shè)置本地軟件包存儲(chǔ)庫。在包管理器的右上角有一個(gè)下拉列表，用于選擇包的來源和齒輪圖標(biāo)。 通過單擊此圖標(biāo)，您將看到設(shè)置窗口，在本地源中，您將指定NuGet文件夾的路徑。

我們需要一份報(bào)表和一個(gè)數(shù)據(jù)庫。 將App_Data文件夾添加到項(xiàng)目根目錄，并將Master-Detail.frx和nwind.xml文件拖入其中。 這些文件可以在Demos - > Reports文件夾中的FastReport.Net安裝目錄中找到。

項(xiàng)目的根目錄是Controllers目錄，該目錄已包含一個(gè)控制器。我們使用它。 只添加一個(gè)方法：

using FastReport.Web;
…
[HttpGet("[action]")]
        public IActionResult ShowReport()
        {
            WebReport WebReport = new WebReport();
            WebReport.Width = "1000";
            WebReport.Height = "1000";
            WebReport.Report.Load("App_Data/Master-Detail.frx"); // 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();
        }

現(xiàn)在您需要為它創(chuàng)建一個(gè)視圖。 將Views文件夾添加到項(xiàng)目根目錄。 還有一個(gè)SampleData。 現(xiàn)在，在此文件夾中，我們將使用以下代碼創(chuàng)建ShowReport.cshtml視圖：

@await ViewBag.WebReport.Render()

在我們的演示SPA中，有三個(gè)不必要的網(wǎng)頁。 您可以安全地刪除這些頁面; 我們只對(duì)app.component.htm感興趣 - 這是頁面模板。 對(duì)于此模板，有一個(gè)相應(yīng)的腳本app.component.ts。

您可以在app.component.htm文件中設(shè)置頁面模板，也可以直接在腳本中的組件模板參數(shù)中進(jìn)行設(shè)置。

我們的任務(wù)是“cross”角度和ASP .Net Core。 這意味著我們將使用控制器和視圖進(jìn)行操作。 相當(dāng)標(biāo)準(zhǔn)的ASP .Net Core MVC應(yīng)用程序。 最簡(jiǎn)單的解決方案是在iframe中傳遞視圖：

App.component.ts：

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `   `
})
export class AppComponent {
}

這樣一個(gè)簡(jiǎn)單的代碼允許您在加載SPA應(yīng)用程序時(shí)立即顯示報(bào)表。 如果您為報(bào)表選擇了單獨(dú)的頁面，但是如果需要更多交互性，這是合適的嗎？ 例如，單擊時(shí)加載報(bào)表的按鈕。 讓我們?yōu)轫撁婺０逄砑右粋€(gè)按鈕，以及一個(gè)按鈕單擊事件及其處理程序：

@Component({
    selector: 'app-root',
    template: ``
})
export class AppComponent {
    show: boolean = false;

    Clicked() {
        this.show = true;
    }
}

我們?cè)谄鋵傩灾刑砑恿艘粋€(gè)按鈕和一個(gè)單擊的事件。 但是如何在按下按鈕之前隱藏框架？ 為此，我們將框架包裝在具有條件的div中 - 檢查'show'變量是否為'true'。 默認(rèn)情況下，此變量設(shè)置為false，因此在顯示頁面時(shí)不會(huì)顯示此div。 因此，Clicked函數(shù)只是將show變量的值設(shè)置為true。

將幀的src值放入變量并將其設(shè)置在單擊的函數(shù)中會(huì)很好。 但是，如果你這樣做：

……
url: string;

    Clicked() {
        this.show = true;
        this.url = "api/SampleData/ShowReport";
    }

那樣不行。 事實(shí)是鏈接需要使用特殊的“cleaner”DOMSanitizer進(jìn)行規(guī)范化。 它旨在使html代碼和URL免受惡意包含。

讓我們?cè)赼pp文件夾中創(chuàng)建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);
    }
}

該類將以正確的格式檢查url的安全性。 為了在app.component中使用此Pipe，我們需要將它添加到app.module.ts中的模塊：

import { SafeUrlPipe } from "./safeUrl.pipe";

@NgModule({
  declarations: [
    AppComponent,
      SafeUrlPipe
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
      FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
Let's go back to app.component.ts. Now we can use Pipe:
 import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: ``
})
export class AppComponent {
    show: boolean = false;
    url: string;

    Clicked() {
        this.show = true;
        this.url = "api/SampleData/ShowReport";
    }
}

進(jìn)一步開發(fā)該想法，您可以將報(bào)表的參數(shù)名稱添加到ShowReport方法，并在輸出中獲取所需的報(bào)表。

在啟動(dòng)應(yīng)用程序之前有最后的觸摸。 打開Startup.cs文件并在Configure（）方法中添加一行：

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

因此，我們連接到應(yīng)用程序FastReportBuilderExtensions，它將允許渲染報(bào)表。

現(xiàn)在讓我們運(yùn)行我們的演示應(yīng)用程序：

按下按鈕，我們得到了所需的報(bào)表。 正如您所看到的，使用帶有Angular SPA的FastReport并不困難。

購買FastReport.Net正版授權(quán)，請(qǐng)點(diǎn)擊“”喲！