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

翻译|使用教程|编辑:王香|2019-05-09 10:58:26.000|阅读 20 次

概述:许多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文件夹添加报表模板。

FastReport

如您所见,我们还从同一文件夹中添加了一个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页面上,我们将看到一个下拉列表:

FastReport

选择Matrix报表的名称:

FastReport

现在点击Master-Detail:

FastReport

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

FastReport

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

FastReport

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

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


相关链接:

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



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

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

登录慧都网发表评论登录


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
在线客服 在线QQ 电话咨询
400-700-1020
在线客服系统
live chat