文档章节

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

x
 xiaochuachua
发布于 05/09 11:32
字数 1610
阅读 1
收藏 0

下载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。

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


相关链接:

本文转载自:https://www.fast-report.com/en/blog/266/show/

x
粉丝 0
博文 225
码字总数 49214
作品 0
私信 提问
2015年值得关注的8款用户界面新品

1.Qt 下载地址 | 中文教程连载 Qt 是目前最先进、最完整的跨平台C++开发工具。它不仅完全实现了一次编写,所有平台无差别运行,更提供了几乎所有开发过程中需要用到的工具。如今,Qt已被运用...

百mumu
2015/12/23
130
0
盘点2015年值得关注的8款跨平台开发工具(界面类)

1.Qt 下载地址 | 中文教程连载 Qt 是目前最先进、最完整的跨平台C++开发工具。它不仅完全实现了一次编写,所有平台无差别运行,更提供了几乎所有开发过程中需要用到的工具。如今,Qt已被运用...

百mumu
2016/01/20
185
0
2015年用户界面工具干货资源精选

| 更多干货资源请移步用户界面专题 | DevExpress 2015.1超详细更新说明文档中文版 历时两月吐血翻译整理的DevExpress 2015.1超详细更新说明文档 | 附PDF版下载地址>> DevExpress 15.2帮助文档...

百mumu
2015/12/25
292
0
BCGControlBar中文教程之Ribbon Designer(6/6)

BCGControlBar Pro for MFC最新试用版下载请猛戳>>> Ribbon Designer允许用户轻松地创建实际的应用程序原型。这里需要现有的MFC项目作为输入并生成一个带有RC文件的Ribbon元素的输出。当您使...

Miss_Hello_World
2016/10/25
31
0
BCGControlBar中文教程之Ribbon Designer(4/6)

BCGControlBar Pro for MFC最新试用版下载请猛戳>>> Ribbon Designer允许用户轻松地创建实际的应用程序原型。这里需要现有的MFC项目作为输入并生成一个带有RC文件的Ribbon元素的输出。当您使...

Miss_Hello_World
2016/10/09
22
0

没有更多内容

加载失败,请刷新页面

加载更多

Taro 兼容 h5 踩坑指南

最近一周在做 Taro 适配 h5 端,过程中改改补补,好不酸爽。 本文记录📝遇到的问题,希望为有相同需求的哥们👬节约点时间。 Taro 版本:1.3.9。 解决跨域问题 h5 发请求会报跨域问题,需...

dkvirus
38分钟前
2
0
Spring boot 静态资源访问

0. 两个配置 spring.mvc.static-path-patternspring.resources.static-locations 1. application中需要先行的两个配置项 1.1 spring.mvc.static-path-pattern 这个配置项是告诉springboo......

moon888
今天
1
0
hash slot(虚拟桶)

在分布式集群中,如何保证相同请求落到相同的机器上,并且后面的集群机器可以尽可能的均分请求,并且当扩容或down机的情况下能对原有集群影响最小。 round robin算法:是把数据mod后直接映射...

李朝强
今天
3
0
Kafka 原理和实战

本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/bV8AhqAjQp4a_iXRfobkCQ 作者简介:郑志彬,毕业于华南理工大学计算机科学与技术(双语班)。先后从事过电子商务、开放平...

vivo互联网技术
今天
19
0
java数据类型

基本类型: 整型:Byte,short,int,long 浮点型:float,double 字符型:char 布尔型:boolean 引用类型: 类类型: 接口类型: 数组类型: Byte 1字节 八位 -128 -------- 127 short 2字节...

audience_1
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部