彩票走势图

开源报表FastReport Open Source基础教程:如何与Angular SPA一起使用

翻译|使用教程|编辑:李显亮|2020-08-06 10:08:40.060|阅读 454 次

概述:本文将讲解如何与Angular SPA一起使用FastReport Open Source。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

报表生成器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();
        }

对于此方法,需要创建一个同名的视图,其中只有一行代码-报告呈现:

@await ViewBag.WebReport.Render()

在应用程序的客户端部分,我们在组件的template属性中定义页面模板。 该文件称为App.component.ts:

import { Component } from '@angular/core';
import { SafeUrlPipe } from "./safeUrl.pipe";

@Component({
    selector: 'app-root',
    template: `<div>
               &nbsp;    <input type="button" (click)="Clicked()" value = "Show Report"/>
                 &nbsp; <div *ngIf="show">
                    <iframe  id="report" height="1000" width="1000" [src]="url | safeUrl"><;/iframe>
  &nbsp;     &nbsp;           </div>
      &nbsp;        </div>`
})
export class AppComponent {
    show: boolean = false;
    url: string;

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

默认情况下,页面模板位于单独的文件中。添加了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折起!点击查看优惠价格,或咨询在线客服了解详情。


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP