報表生成器FastReport .NET是適用于.NET Core 3，ASP.NET，MVC和Windows窗體的全功能報告庫。使用FastReport .NET，您可以創建獨立于應用程序的.NET報告。

開源在我們這個時代非常流行。軟件市場的全球巨頭對其普及起到了相當大的作用。畢竟，這些公司正在開發高端商業軟件，而它們的開源項目是基于經過驗證的解決方案和最佳實踐的。

FastReport Open Source的結構包括兩個庫：FastReport.OnlineDesigner 和FastReport.OnlineDesigner.Web

第一個包含從FastReport.Net繼承的報告生成器的主要功能。第二個是將報告生成器適應.Net Core框架。特別是，WebReport對象允許在網頁上顯示帶有導航元素的表單，該表單可以逐頁顯示報告。

本文將講解如何與Angular SPA一起使用FastReport Open Source。

如何與Angular SPA一起使用

在Microsoft Visual Studio中創建Angular SPA，可以使用.Net Core MVC后端的所有優點。 即，使用“視圖”在SPA應用程序中顯示。

要使用Angular，需要安裝Node.js，這是一個在服務器端執行JavaScript代碼的平臺。最簡單的方法是從開發人員的網站//nodejs.org/en/下載安裝程序。它還需要.Net Core SDK 2.0或更高版本。如果您安裝了Microsoft Visual Studio 2017，則說明該SDK已經安裝。

現在，我們在所需的位置為將來的應用程序創建一個文件夾。運行命令提示符。使用cd命令轉到創建的目錄。然后執行命令：

dotnet new angular -o SPAWebReport

然后需要在應用程序的文件夾中安裝打字稿包。 為此，請在命令提示符下導航至包含應用程序的文件夾并執行以下命令：

npm install -g typescript

接下來，我們需要在NuGet管理器中安裝其他軟件包：

• FastReport.OpenSource
• FastReport.OpenSource.Web
• Microsoft.Net.Compilers

在控制器中，添加為其加載報告和數據的方法：

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 xml database
            WebReport.Report.RegisterData(dataSet, "NorthWind"); // Registering the data source in the report
            ViewBag.WebReport = WebReport; //pass the report to View
            return View();
        }

對于此方法，需要創建一個同名的視圖，其中只有一行代碼-報告呈現：

在應用程序的客戶端部分，我們在組件的template屬性中定義頁面模板。 該文件稱為App.component.ts：

默認情況下，頁面模板位于單獨的文件中。添加了iframe，以便可下載的報告在單獨的環境中運行。加載頁面時，我們只會看到按鈕，框架為空。 但是通過單擊按鈕，將給出我們在上面創建的視圖。 為了將鏈接識別為鏈接，而不是簡單文本，使用了“ normalizer” URL。

在單獨的類中實現此“規范化器”。 并且已經將鏈接添加到了類組件。

safeURL.pipe.cs：

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

雖然FastReport Open Source是非常強大的，但仍然有許多限制，你可以點擊下方鏈接查看具體差異。

【功能對比】報表開發工具FastReport Open Source和FastReport .NET都有哪些差異和限制

FastReport Open Source與FastReport .Net間的功能差異還是非常明顯的，如果您是企業用戶或是需要更完整的功能，建議您直接購買FastReport .Net，盛夏狂歡，在線下單立享85折起！點擊查看優惠價格，或咨詢在線客服了解詳情。