Cómo utilizar FR Core Web Report junto a ReactJS

El generador de informes FastReport.Core está diseñado para trabajar con el popular Framework .Net Core. Y se va poniendo más popular gracias a sus bibliotecas, entre ellas Angular, React y Vue. Por lo tanto a  muchos usarios de FastReport les gustaría utilizar informes en sus aplicaciones web escritas en esas bibliotecas. En otro artículo ya hemos hablado de cómo representar informes en una aplicación de única página basada en Angular. Ahora vamos a ver un ejemplo de cómo se usa FR. Core en una aplicación en ReactJS.

Para trabajar con la biblioteca React tenemos que  instalar la plataforma de programa Node JS que permite ejecutar un código JavaScript en el lado del servidor. Además, junto a esta se instalará el administrador de paquetes NPM que permite instalar diferentes paquetes de JavaScript necesarios para el desarrollo.

Ahora necesita .Net Core SDK 2.0. Pero si desarrolla en MS Visual Studio 2017, ya ha instalado este SDK.

Para crear un proyecto en React lo único que tiene que hacer es ejecutar un solo comando en la línea de comandos de Windows. Pero antes tiene que abrir una carpeta (introduciendo el comando "cd") en la que quiere crear el proyecto. Cree el proyecto.

dotnet new react –o FRCoreWebReportReact

Como ya ha podido adivinar, FRCoreWebReportReact es el nombre del futuro proyecto. Ahora abra el fichero FRCoreWebReportReact. csproj.
Añada paquetes de FastReport a NuGet Manager:

Estos paquetes están en la carpeta en la que ha instalado FastReport.Net:

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

El siguiente paso será añadir al proyecto la carpeta App_Data. Del reparto de FastReport.Net podemos coger algunos modelos de informe y la base de datos XML para esos.

Ahora vamos a desarrollar el motor  de la aplicación. En la carpeta Controllers ya hay uno que se llama SampleDataController. Creemos nuestro propio llamado ReportController:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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

En el controlador hay solo un método y este es la descarga del modelo de informe en el objeto de un informe web y su representación en la vista. El método DisplayReport acepta el parámetro name — el nombre del informe.

Ahora para este método web hay que crear una vista. Haga clic con botón derecho en el nombre del método y seleccione el marcador AddView:

A la carpeta Views se añadirá una carpeta más, Report. En esta podemos encontrar la vista DisplayReport. Reemplace el contenido de la vista por la siguiente línea:

1

@await ViewBag.WebReport.Render()

Lo único que nos queda hacer en el lado del servidor de la aplicación es corregir el fichero Startup.cs. Al método Configure añada la siguiente línea:

1

app.UseFastReport();

Pase al lado cliente de la aplicación en ReactJS.

En Solution Explorer encuentre el directorio ClientApp y ábralo. Luego, abra src y components.
En esta carpeta creamos un nuevo archivo Report.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

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: '<iframe height="1000" width="1000" src="api/Report/DisplayReport?name=' + name + '" />' };
 }
 
 static getReport(name) {
 return (
 <div dangerouslySetInnerHTML={Report.createMarkup(name)} />
 )
 }
 
 render() {
 const { options, value } = this.state;
 let contents = this.name ? Report.getReport(this.name) : <div />;
 
 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>
 {contents}
 </div>
 );
 }
}

Este componente representa la página que mostrará el informe. En el constructor de clase hemos declarado el vector options que contiene los nombres de los informes. Ahora se ha realizado el controlador de eventos onChange-handleChange. En él especificamos el elementro del vector options y el valor del variable name que vamos a pasar al servidor para generar el informe seleccionado.

Hay que considerar los métodos estáticos createMarkup y getReport en conjunto. El primero crea inframe cuyo fuente de datos es la vista DisplayReport, que hemos realizado antes. El segundo convierte el código HTML de createMarkup en uno seguro lo que permite insertarlo en el DOM.

La función render() contiene el código marcado que se mostrará en la página. Aquí creamos la variable contents que aceptará como como valor el resultado de la función getReport si seleciona el título del informe en la lista desplegable. Si no, nada se mostrará.

Fíjese en el elemento <select>. Esta lista se completa desde el vector options. Al seleccionar un elemento de la lista, ocurrirá un evento y se realizará la función handleChange. 
Ahora añada este componente al menú de navegación, al fichero NavMenu.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<Navbar inverse fixedTop fluid collapseOnSelect>
 <Navbar.Header>
 <Navbar.Brand>
 <Link to={'/'}>FRCoreWebReportReact</Link>
 </Navbar.Brand>
 <Navbar.Toggle />
 </Navbar.Header>
 <Navbar.Collapse>
 <Nav>
 …
 <LinkContainer to={'/report'}>
 <NavItem>
 Report
 </NavItem>
 </LinkContainer>
…
 </Nav>
 </Navbar.Collapse>
 </Navbar>

Añadimos también el componente Report a App.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import { Report } from './components/Report';
export default class App extends Component {
displayName = App.name
 
render() {
return (
<Layout>
…
<Route path='/report' component={Report} />
…
</Layout>
);
}
}

Ahora arranque la aplicación:

Al principio la página está vacía, lo único que está disponible es el menú desplegable. Selecione un informe de este:

Ahora selecione otro:

Finalmente, podemos decir que hemos logrado nuestro objetivo: podemos ver informes de FastReport en una aplicación escrita en la biblioteca React. Además, todos los botones en el panel de control de informes web no han perdido su funcionalidad. Por ejemplo, el botón "exportar". Selecionemos "exportar" en Microsoft Excel 2007:

Y aquuí tenemos el archivo:

En Solution Explorer encuentre el directorio ClientApp y ábralo. Luego, abra src y components.