Download the latest version of FastReport.Net

FastReport.Net online ordering hot ongoing, instant can enjoy special offers! Click this link to buy it quickly!!

FastReport Core Web Report is designed with popular. Net Core frameworks work together. It has gained popularity due to its compatibility with the Trend Framework and libraries such as Angular, React, and Vue. Therefore, many FastReport users want to use reports in Web applications written in the library above. In another article, we looked at how to display reports in Angular based single-page applications. Now let’s look at an example using FR. The core of the application on ReactJS.

To use the React library, you need to install the Node JS program platform, which allows you to run JavaScript code on the server side. In addition, it will install Package Manager NPM, which allows you to install various Java Script packages needed for development.

Next, you need to. Net Core SDK 2.0. However, if you are developing with MS Visual Studio 2017, you already have this SDK installed.

To create a project on React, simply run a command at the Windows command prompt. But first you need to open the folder in which you want to create the project (command CD). Create a project.

    dotnet new react -o FRCoreWebReportReact

As you might guess, FRCoreWebReportReact is the name of the future project. Now open up FRCoreWebReportReact. The csproj file.

Add the FastReport package to NuGet Manager:

These packages are located in the folder where FastReport.Net is installed:

C: Program Files (x86) \ FastReports \ FastReport.Net \ Nugets

The next thing to do is add the App_Data folder to the project. From the delivery of FastReport.Net, we can provide them with multiple report templates and XML databases.

Let’s add another folder to the root directory of the project – Views. It will store the views we will discuss later.

Now let’s start developing the back end of the application. There is an -sampleDatacontroller in the Controllers folder. Let’s create our own, called 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 WebReport WebReport.Report.Load(String.Format("App_Data/{0}.frx", name)); //Create Data source System.Data.DataSet dataSet = new System.Data.DataSet(); //Open Data base xml dataSet.ReadXml(@"App_Data/nwind.xml"); //Register data source in the object WebReport.Report.RegisterData(dataSet, "NorthWind"); //Send report to View ViewBag.WebReport = WebReport; return View(); }}}

There is only one way in the controller – load the report template into a Web report object and display it in a view. The DisplayReport method accepts the name parameter – the title of the report.

Now, for this Web method, you need to create a view. Right-click on the method name and select AddView:

Another folder – Reports – will be automatically added to the folder view and the DisplayReport view will be displayed. Replace the contents of the view with the following lines:

@await ViewBag.WebReport.Render()

The only thing to do on the server side of your application is edit the startup. cs file. In the Configure method, add the following line:

app.UseFastReport();

Go to the client of the application on ReactJS.

In Solution Explorer, locate the ClientApp directory and expand it. Then we open SRC and components.

Let’s create a new report.js file in this folder:

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} ); }}

This component represents the page that will display the report. In the class constructor, we declare an array of options containing the report name. The onchange-Handlechange event handler is then implemented. In it, we specify the values of the elements and variable names of the Options array that will be passed to the server to generate the selected report.

Static methods of createMarkup and getReport should be considered together. The first one is to create an IFRAME whose data source is the DisplayReport view we implemented earlier. The second is to convert HTML code from createMarkup to secure code that allows you to embed it in the DOM.

The Render () function contains the markup code that will be displayed on the page. Here we create a variable content that will take the result as the value getReport function when you select the report name from the drop-down list. Otherwise, nothing is displayed.

Pay attention to

   FRCoreWebReportReact      …
   Report
  …

Now let’s add the Report component to app.js:

import { Report } from './components/Report';
export default class App extends Component {
displayName = App.name

render() { return (… …) ; }}

Run the application:

First the page is empty and only the drop-down list is available. Select one of the reports:

Now select another report:

In summary, assuming our goal is achieved – the FastReport report is displayed in an application written in the React library. In addition, all buttons in the Web Reporting control panel save functionality, such as exporting. Select Export to Microsoft Excel 2007:

The documents we got:

Related links:

  • Download the latest trial version of Fastrepot.net
  • Fastreport Chinese website
  • FastReport’s latest Chinese user manual is on the line, please download it!!

Any questions about the product, welcome to consult online customer service >>