如何在ReactJS中使用FastReport Core Web Report
2019独角兽企业重金招聘Python工程师标准>>>
下载FastReport.Net最新版本
FastReport Core Web Report旨在与流行的.Net Core框架协同工作。由于与趋势网框架和Angular,React,Vue等库的兼容性,他获得了更多的人气。因此,许多FastReport用户希望在上面库中编写的Web应用程序中使用报表。在另一篇文章中,我们已经考虑过如何在基于Angular的单页面应用程序中显示报表。现在让我们看一下使用FR的例子。在ReactJS上的应用程序的核心。
要使用React库,您需要安装Node JS程序平台,该平台允许您在服务器端运行JavaScript代码。此外,它将安装Package Manager NPM,它允许您安装开发所需的各种Java Script包。
接下来,您需要.Net Core SDK 2.0。但是,如果您正在使用MS Visual Studio 2017进行开发,那么您已经安装了此SDK。
要在React上创建项目,只需在Windows命令提示符下运行一个命令。但首先需要打开要在其中创建项目的文件夹(命令CD)。创建一个项目。
dotnet new react -o FRCoreWebReportReact
正如您猜测的那样,FRCoreWebReportReact是未来项目的名称。现在打开 FRCoreWebReportReact。csproj文件。
在NuGet Manager中添加FastReport包:
这些包位于已安装FastReport.Net的文件夹中:
C:\ Program Files(x86)\ FastReports \ FastReport.Net \ Nugets
接下来要做的是将App_Data文件夹添加到项目中。从FastReport.Net的交付中,我们可以为它们提供多个报表模板和XML数据库。
让我们再添加一个文件夹到项目的根目录 - Views。它将存储我们稍后将讨论的视图。
现在让我们开始开发应用程序的后端。Controllers文件夹中已有一个 - SampleDataController。让我们创建自己的,名为ReportController:
using System; using Microsoft.AspNetCore.Mvc; using FastReport.Web;namespace FRCoreWebReportReact.Controllers {[Route("api/[controller]")]public class ReportController : Controller{[HttpGet("[action]")]public IActionResult DisplayReport(string name){WebReport WebReport = new WebReport();WebReport.Width = "1000";WebReport.Height = "1000";//Load report into the object WebReportWebReport.Report.Load(String.Format("App_Data/{0}.frx", name));//Create Data sourceSystem.Data.DataSet dataSet = new System.Data.DataSet();//Open Data base xmldataSet.ReadXml(@"App_Data/nwind.xml"); //Register data source in the objectWebReport.Report.RegisterData(dataSet, "NorthWind");//Send report to ViewViewBag.WebReport = WebReport;return View();}} }
控制器中只有一种方法 - 将报告模板加载到Web报表对象中并在视图中显示它。DisplayReport方法接受name参数 - 报表的标题。
现在,对于此Web方法,您需要创建一个视图。右键单击方法名称并选择AddView:
另一个文件夹 - 报表 - 将自动添加到文件夹视图中,并且将显示DisplayReport视图。使用以下代码行替换视图的内容:
@await ViewBag.WebReport.Render()
在应用程序的服务器端唯一要做的就是编辑Startup.cs文件。在Configure方法中,添加以下行:
app.UseFastReport();
转到ReactJS上的应用程序的客户端。
在解决方案资源管理器中,找到ClientApp目录并展开它。然后我们打开src和组件。
让我们在这个文件夹中创建一个新的Report.js文件:
import React, { PureComponent, Fragment } from 'react';export class Report extends PureComponent {constructor(props) {super(props);this.state = {options: [{value: '-- Select report name --',},{value: 'Matrix',},{value: 'Master-Detail',},{value: 'QR-Codes',}, {value: 'Highlight',}, {value: 'Image',}]};}handleChange = (event) => {this.setState({ value: event.target.value });this.name = event.target.value;}static createMarkup(name) {return { __html: '' };}static getReport(name) {return ()}render() {const { options, value } = this.state;let contents = this.name ? Report.getReport(this.name) : ;return ({options.map(item => ({item.value}))}{contents});} }
此组件表示将显示报表的页面。在类构造函数中,我们声明了一个包含报表名称的选项数组。然后实现onChange-handleChange事件处理程序。在其中,我们指定options数组的元素和变量名的值,它们将传递给服务器以生成所选报表。
应该一起考虑createMarkup和getReport的静态方法。第一个创建一个IFRAME,其数据源是我们之前实现的DisplayReport视图。第二种是将HTML代码从createMarkup转换为安全的代码,允许您将其嵌入DOM中。
Render()函数包含将在页面上显示的标记代码。这里我们创建一个变量内容,当您在下拉列表中选择报表名称时,它将把结果作为值getReport函数。否则,不会显示任何内容。
注意
FRCoreWebReportReact …Report…
现在让我们将Report组件添加到App.js:
import { Report } from './components/Report'; export default class App extends Component { displayName = App.namerender() { return (……); } }
运行应用程序:
首先页面为空,只有下拉列表可用。从中选择一个报表:
现在选择另一份报表:
总而言之,假设我们的目标已实现 - FastReport报表显示在React库中编写的应用程序中。此外,Web报表控制面板中的所有按钮都保存了功能,例如导出。选择导出到Microsoft Excel 2007:
我们得到的文件:
相关链接:
- fastrepot.net最新试用版下载
- fastreport中文网
- FastReport最新中文用户手册火热上线,速来下载!!!
转载于:https://my.oschina.net/u/3905944/blog/3051630
如何在ReactJS中使用FastReport Core Web Report相关推荐
- 如何在单页应用程序Angular 7中使用FastReport Core Web报表
2019独角兽企业重金招聘Python工程师标准>>> 下载FastReport.Net最新版本 单页应用程序的概念正在寻找越来越多的支持者.最着名的单页框架之一是Angular,它 ...
- 父组件更新prop_如何在ReactJS中更新组件的prop —哦,是的,有可能
父组件更新prop by Dheeraj DeeKay 通过Dheeraj DeeKay 如何在ReactJS中更新组件的prop -哦,是的,有可能 (How to update a compone ...
- jwt token 过期刷新_如何在SpringBoot中集成JWT(JSON Web Token)鉴权
这篇博客主要是简单介绍了一下什么是JWT,以及如何在Spring Boot项目中使用JWT(JSON Web Token). 1.关于JWT 1.1 什么是JWT 老生常谈的开头,我们要用这样一种工具 ...
- reactjs jquery ajax,如何在ReactJS中使用JQuery
qq_遁去的一_1 您应该尝试避免在ReactJS中使用jQuery.但是,如果您真的想使用它,可以将其放在组件的componentDidMount()生命周期函数中.例如class App exte ...
- 如何在Windows中设置默认的Web浏览器
It's not an enjoyable experience when you click a link and the wrong browser loads. To avoid this ex ...
- ubuntu 安装yum_如何在 Linux 中安装微软的 .NET Core SDK | Linux 中国
本分步操作指南文章解释了如何在 Linux 中安装 .NET Core SDK 以及如何使用 .NET 开发出第一个应用程序.-- Sk致谢译自 | ostechnix.com 作者 | Sk译者 | ...
- [译]ASP.NET Core Web API 中使用Oracle数据库和Dapper看这篇就够了
园子里关于ASP.NET Core Web API的教程很多,但大多都是使用EF+Mysql或者EF+MSSQL的文章.甚至关于ASP.NET Core Web API中使用Dapper+Mysql组 ...
- 如何在Tomcat中设置JNDI数据库连接池-Spring教程示例
在Spring和Tomcat中设置JNDI数据库连接池非常容易. Tomcat服务器文档提供了有关如何在Tomcat 5.6或7中设置连接池的足够信息.在这里,我们将结合使用Tomcat 7和Spri ...
- NET问答: 如何在 ASP.NET Core Web API 的 Response 中添加自定义的 Header ?
咨询区 JDawg: 我正在将 Web API 2 移植到 ASP.NET Core Web API 上,以前我都直接在 Response 属性上添加自定义的 Header,如下代码所示: HttpR ...
最新文章
- 8个流行的Python可视化工具包!!!
- mybatis 联查
- 云南林业职业技术学院计算机考试试题,云南林业职业技术学院单招模拟题(含解析)9.docx...
- toFixed()方法
- Yii2 获取URL的一些方法
- cut、grep和排序命令
- 怎样改动、扩展并重写Magento代码
- 华为ensp命令大全_计算机网络 实验六----eNSP基础解答
- 免费下载百度文库的几款在线工具推荐
- mtk2503 新增物联网卡apn
- 开源 免费 java CMS - FreeCMS1.5-职位管理
- redhat安装wine教程_超简单制作多合一系统安装启动U盘的工具
- java list筛选数据_java 根据条件在List中筛选出符合条件的对象
- 自动驾驶是一门怎样的生意?盘点5家创业公司商业落地的3条逻辑...
- Tesseract的安装教程
- 几乎所有的互联网公司都在进行一场脱虚向实的全新嬗变
- 【编程学习】浅谈哈希表及用C语言构建哈希表!
- iphone微信小程序底部预留bar安全距离css
- html文件访问遭拒,防止IE中出现“ SCRIPT5:访问被拒绝”错误
- Windows DLL编程中的导入导出:__declspec(dllimport) ,__declspec(dllexport) ,