许多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 (
 <div>
 <div>
 <Fragment>
 <select onChange={this.handleChange} value={value}>
 {options.map(item => (
 <option key={item.value} value={item.value}>
 {item.value}
 </option>
 ))}
 </select>
 </Fragment>
 </div>
 <WebReport name={this.state.name} />
 </div>
 );
 }
 }

注意WebReport组件的导入。

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

请注意<WebReport name = {this.state.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/Design?name=' + nextProps.name + '').then(response => response.text()).then(text => {
 this.setState({ designer: text });
 });
 };
 
 render() {
 return (
 <div dangerouslySetInnerHTML={{ __html: this.state.designer }} />
 );
 }
}

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

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

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

<Navbar.Collapse>
 <Nav>
 …
 <LinkContainer to={'/designer'}>
 <NavItem>
 Designer
 </NavItem>
 </LinkContainer>
 </Nav>
</Navbar.Collapse>

并在App.js文件中添加：

…
import { Designer } from './components/Designer';
…
 <Layout>
…
 <Route path='/designer' component={Designer} />
 </Layout>
…

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

选择Matrix报表的名称：

现在点击Master-Detail：

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

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

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

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

点击“了解更多”下载产品最新试用版

↓↓↓