如何在单页应用程序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最新中文用户手册火热上线，速来下载！！！