如何在单页应用程序Angular 7中使用FastReport报表工具?

单页应用程序的概念正在寻找越来越多的支持者。最着名的单页框架之一是Angular,它是一个单页的JavaScript应用程序框架。Angular的第一个版本真的基于JavaScript。

     单页应用程序的概念正在寻找越来越多的支持者。最着名的单页框架之一是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 ,则无需执行此操作。

如何创建应用程序/strong>

    有两种方法 – 在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

    现在有两个包,安装它们。  要在应用程序中使用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/ShowReportame=" + 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 { }

这样就完成了演示应用程序的工作。运行应用程序:

FastReport

首先,您需要选择其中一个报表,然后单击按钮:

FastReport

现在选择另一个报表并单击按钮:

FastReport

因此,您已经看到在Angular单页面应用程序中使用FastReport.Core报告生成器并不比通常的ASP .Net Core应用程序困难得多 。


相关链接:

  • fastrepot.net最新试用版下载
  • fastreport中文网

标签:

来源:慧都

声明:本站部分文章及图片转载于互联网,内容版权归原作者所有,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2021年6月6日
下一篇 2021年6月6日

相关推荐

发表回复

登录后才能评论