如何使用具有FastReport.Core库的Online Designer

许多FastReport.Core用户都对报表生成器如何在使用React库编写的Web应用程序中工作感兴趣。在本文中，我们将介绍使用在线设计器的方法。尽管它与常规报表显示在同一个Web对象中，但与React中显示的差异很大。

下载FastReport.Net最新版本

FastReport.Net在线订购火热进行中，立可享受特别优惠！点此链接，速来抢购！！！

许多FastReport.Core用户都对报表生成器如何在使用React库编写的Web应用程序中工作感兴趣。在本文中，我们将介绍使用在线设计器的方法。尽管它与常规报表显示在同一个Web对象中，但与React中显示的差异很大。

如果您从未在React上使用.Net Core上的后端创建应用程序，那么您需要：

1）安装NodeJS。这是一个软件包，允许您在服务器端执行JavaScript代码，以及安装各种JavaScript库。

2）安装Microsoft Visual Studio 2017或其他IDE + .Net Core SDK 2.0。

要创建应用程序，请在项目所在的文件夹中打开Windows命令提示符，然后执行以下命令：

dotnet new react -o ReactFRCoreDesigner

打开创建的项目。让我们将FastReport库添加到NuGet包管理器中。配置文件夹的本地包源：

C： Program Files（x86） FastReports FastReport.Net Nugets

安装FastReport.Core包。

在项目中找到Startup.cs文件，并在Configure（）方法中添加一行代码：

app.UseFastReport();

现在我们可以在项目中使用报表生成器。

除了显示在线设计器之外，我们还会查看传输所需报表名称的方式，并将其上传到在线设计器。因此，我们将App_Data文件夹添加到项目中。在其中，我们将从FR.Net安装目录中的Demos Reports文件夹添加报表模板。

如您所见，我们还从同一文件夹中添加了一个xml文件。这是一个报告数据库。

找到Controllers文件夹。我们可以使用SampleDataController控制器。添加两个方法：

…using FastReport.Web;using System.IO;…[HttpGet("[action]")] public IActionResult Design(string name) { WebReport WebReport = new WebReport(); WebReport.Width = "1000"; WebReport.Height = "1000"; if (name != "Blank") WebReport.Report.Load("App_Data/" + name + ".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 the database xml WebReport.Report.RegisterData(dataSet, "NorthWind"); // Registering the data source in the report  WebReport.Mode = WebReportMode.Designer; // Set the web report object mode - designer display WebReport.DesignerLocale = "en"; WebReport.DesignerPath = @"WebReportDesigner/index.html"; // We set the URL of the online designer WebReport.DesignerSaveCallBack = @"api/SampleData/SaveDesignedReport"; // Set the view URL for the report save method WebReport.Debug = true; ViewBag.WebReport = WebReport; // pass the report to View return View(); }  [HttpPost("[action]")] // call-back for save the designed report public IActionResult SaveDesignedReport(string reportID, string reportUUID) { ViewBag.Message = String.Format("Confirmed {0} {1}", reportID, reportUUID); // Set the message for representation Stream reportForSave = Request.Body; // Write the result of the Post request to the stream. string pathToSave = @"App_Data/TestReport.frx"; // get the path to save the file using (FileStream file = new FileStream(pathToSave, FileMode.Create)) // Create a file stream { reportForSave.CopyTo(file); // Save query result to file } return View(); }

第一种方法创建Web报表对象，为其设置模板和数据源，还设置报表编辑模式，报表设计器设置。因此，该方法将返回将显示Web报表对象的视图。该方法有一个参数 – 报表的名称，我们在将报表模板加载到报表的Web对象时替换该参数。

第二种方法是用于单击报表保存按钮的回调处理程序。它将编辑的报表保存在App_Data文件夹中。

对于这两种方法，您必须创建两个视图。在项目根目录中创建一个Views文件夹。现在回到控制器。右键单击设计方法签名，然后从菜单中选择“添加视图”。设置视图名称 – 设计。用代码替换创建的视图的全部内容：

@await ViewBag.WebReport.Render()

对于SaveDesignedReport方法，我们还创建了一个具有相同名称的视图。 其内容被替换为：

@ViewBag.Message

我们转向前端。 React应用程序位于ClientApp文件夹中。 在解决方案浏览器的树中展开它。 进一步我们打开src和components目录。 将新组件添加到此文件夹。 创建一个名为Designer的javascript文件：

import React, { PureComponent, Fragment } from 'react';import { WebReport } from './WebReport'; export class Designer extends PureComponent { constructor(props) { super(props); this.state = { options: [ { value: 'Select report name …', }, { value: 'Matrix', }, { value: 'Master-Detail', }, { value: 'Text', }, ] }; }   handleChange = (event) => { this.setState({ name: event.target.value });  };  render() { const { options, value } = this.state; return ({options.map(item => ({item.value}))}); } }

注意WebReport组件的导入。

首先，将状态添加到类构造函数中。 在我们的例子中，它是一个包含报表名称的数组。 接下来，立即考虑render（） – 构建网页的方法。 每次状态更改时都会执行渲染。 例如，当我们选择列表项时，将执行onChanges事件处理程序。 此方法使用setState函数设置name变量的新状态。 之后，将重建渲染的内容。

请注意

这里调用另一个组件。 作为参数，它接收选定的报表名称。

考虑WebReport组件，它也应该像在components目录中创建的Designer.js一样：

import React, { Component } from 'react'; export class WebReport extends Component { constructor(props) { super(props); this.state = { designer: "" }; }  componentWillReceiveProps(nextProps) { fetch('api/SampleData/Designame=' + nextProps.name + '').then(response => response.text()).then(text => { this.setState({ designer: text }); }); };  render() { return (); }}

这个组件的重点是对后端执行’get’请求并返回生成的html代码。

每次props属性更改时，都会执行内置函数componentWillReceiveProps（nextProps）。 也就是说，当此组件在调用时将收到新值。 我们从属性中获取报表名称，并将其替换为请求的URL。 我们以文本格式得到答案。 它需要转换为安全的html代码才能插入到DOM中。 dangerouslySetInnerHTML属性将帮助我们解决这个问题。

它仍然只是将Designer组件添加到菜单中。 添加到NavMenu文件：

…Designer

并在App.js文件中添加：

…import { Designer } from './components/Designer';………

运行该应用程序，在Designer页面上，我们将看到一个下拉列表：

选择Matrix报表的名称：

现在点击Master-Detail：

转到“报表”选项卡，然后单击“保存”按钮：

右侧出现“已保存”消息，告诉我们在服务器上成功保存报表。

另一个文件出现在App_Data文件夹中 – TestReport.frx。

这样就完成了我们演示应用程序的创建。我们成功显示了报表设计器，将必要的报表加载到其中并保存。

相关链接：

• fastrepot.net最新试用版下载
• fastreport中文网
• FastReport最新中文用户手册火热上线，速来下载！！！

关于产品的任何问题，欢迎咨询在线客服>>

标签：报表报表控件FastReportFastReport .net

来源：慧都