报表生成器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代码的平台。最简单的方法是从开发人员的网站https://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折起！点击查看优惠价格，或咨询在线客服了解详情。