Cómo utilizar FR Core Web Report en una aplicación de única página basada en Angular 7

Va creciendo el número de los que prefieren la concepción de aplicaciones de única página. Una de las famosas de framework es Angular. Es un framework destinado a crear aplicaciones de única página basado en JavaScript. La primera versión de Angular de hecho está basada en JS. Pero las posteriores se basan en TypeScript y son bastante diferentes de la primera. No tiene sentido crear nuevas aplicaciones en AngularJS, por lo cual vamos a utilizar la versión actual de Angular 7.

Microsoft ha conseguido combinar Angular y ASP. Net Core MVC; Por lo tanto, nos da relativamente fácil visualizar informes en una aplicación de única página utilizando la implementación para ASP Net Core MVC.

Instalación de Node.js

Para empezar a desarrollar en el framework Angular debería preinstalar una plataforma para ejecutar el código JavaScript en el lado del servidor. Se llama Node.js. Para instalarla, descargue un instalador que cirresponda a su sistema operativo desde el sitio web del desarrollador https://nodejs.org/en/. Es totalmente gratis.

También tendrá que instalar .Net Core SDK 2.0 o versión más reciente. No hace falta hacerlo si tiene instalado Microsoft Visual Studio 2017.

¿Cómo crear una aplicación?

Hay dos maneras: puede crear un nuevo proyecto en Visual Studio o teclear el comando necesario en la línea de comandos.

La primera opción va por instalar un modelo de una aplicación en Angular en las extensiones de Visual Studio.

La segunda es mucho más fácil. Cree una carpeta para nuestra aplicación. En la línea de comandos de Windows pase a la carpeta creada tecleando el comando "cd" y ejecutándolo:

dotnet new angular -o AngularFRCore

Como ya ha podido adivinar, AngularFRCore es el nombre de nuestro futuro proyecto.

Después de instalar la aplicación, hay que instalar las bibliotecas de TypeScript. Vamos a hacerlo con el instalador de bibliotecas de la plataforma Node.js npm.

Espero que todavía no haya cerrado la consola donde hemos ejecutado el comando para crear la aplicación.

Ejecute un comando más en la consola de la aplicación:

npm install -g typescript

Ahora abra el proyecto. Sí, no está el archivo de solución, este se va a crear automáticamente cuando inicie el proyecto por primera vez.

El objetivo de nuestra aplicación demo es demostrar cómo utilizar FastReport.Core en una aplicación de única página. Añada las bibliotecas de FastReport al proyecto. Abra el administrador de paquetes NuGet. En la esquina superior derecha se puede seleccionar fuente de paquetes. Necesitamos una fuente local, pero primero hay que ajustarla. Para eso haga clic en el ícono de rueda dentada en la misma esquina. Ahora establezca la ubicación de la carpeta local que contiene paquetes:

Por defecto la dirección de la carpeta es С:\Program Files (x86)\FastReports\FastReport.Net\Nugets.

Con la instalación de FastReport.Net encontrará paquetes preparados en la carpeta mencionada anteriormente. Vuelva al administrador de paquetes:

Tenemos dos paquetes disponibles. Instálelos.

Para utilizar FastReport en una aplicación tiene que añadir una línea de código al archivo Startup.cs:

1
2
3
4
5
6

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
 {
 …
 app.UseFastReport();
…
}

Si damos una breve vista al árbol de proyectos, podremos encontrar los directorios Controllers y Models que conocemos por aplicaciones MVC. Mirando hacia adelante, digo "sí", podemos utilizar una aplicación MVC .Net Core casi sin cambios como backend.

En la carpeta Controllers ya hay uno, SampleDataController.

Sin miedo limpie el contenido de la clase, ya que creamos nuestro propio método:

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

[HttpGet("[action]")]
 public IActionResult ShowReport(string name)
 {
 WebReport WebReport = new WebReport();
 WebReport.Width = "1000";
 WebReport.Height = "1000";
 WebReport.Report.Load(String.Format("App_Data/{0}.frx", name)); // 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 xml database
 WebReport.Report.RegisterData(dataSet, "NorthWind"); // Registering the data source in the report
 ViewBag.WebReport = WebReport; // pass the report to View
 return View();
 }

Si ya conoce FastReport.Core, no encontrará nada nuevo en este método. Hemos creado el objeto de un informe web, cargado el modelo de informe en él, creado y registrado la fuente de datos y pasado el informe a la vista. Este método tiene un parámetro que es el nombre del informe y que utilizamos para cargar el el modelo de informe deseado.

FastReport.Net incluye una carpeta con informes de demostración:

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

Vamos a utilizar unos modelos y la base de datos nwind.xml que están en esta. Pero primero cree la carpeta App_Data en la raíz del proyecto. Ahora arrastre todos los ficheros a esta de la carpeta indicada arriba:

Barcode.frx, Master-Detail.frx, Matrix.frx, nwind.xml.

El siguiente paso es crear una vista para este método.

En nuestro proyecto no está la carpeta Views. Cree esta en la raíz del proyecto. Dentro de la carpeta debería crear una más bajo el nombre SampleData. Y, finalmente, dentro de esta carpeta cree la nueva vista ShowReport.chtml con el siguiente contenido:

1

@await ViewBag.WebReport.Render()

En el modo asincrónico hay que esperar para que se genere la versión HTML del informe.

De esta manera, hemos preparado el motor. Ahora fíjese en la carpeta ClientApp. Es esta la aplicación de única página. Nos interesa el directorio src -> app. Aquí están los ficheros básicos que hacen aparecer el contenido: los modelos de la página y sus manipuladores TypeScript. El modelo de la página principal es app.component.html. Es este que vamos a corregir:

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

<tr>
 <td width="150px">
 </td>
 <td>
 <h1>FastReport.Core Demo</h1>
 <p>Select a report and click the button</p>
 <div>
 <div>
 <input type="radio" id="reportChoice1"
 name="report" value="Matrix" (click)="this.report = 'Matrix'">
 <label for="reportChoice1">Matrix</label>
 <input type="radio" id="reportChoice2"
 name="report" value="Matrix" (click)="this.report = 'Master-Detail'">
 <label for="reportChoice2">Master-Detail</label>
 <input type="radio" id="reportChoice2"
 name="report" value="Matrix" (click)="this.report = 'Barcode'">
 <label for="reportChoice2">Barcode</label>
 </div>
 <input type="button" (click)="Clicked()" value="Show Report" />
 <div *ngIf="show">
 <iframe id="report" height="1000" width="1000" [src]="url | safeUrl"></iframe>
 </div>
 </div>
 </td>
 </tr>

Primero mostremos tres botones de radio para informes diferentes. Cada botón está suscrito al evento Click según el que se establece el valor de la variable report. La función toma el nombre del informe como parámetro. De este modo organizamos la seleción del modelo deseado de informe. Una implementación bastante primitiva, pero, ¿para qué hacer algo complejo si es una demostración?

Abajo mostremos un botón llamado ShowReport, que también está suscrito al evento click con el manipulador Clicked(). Fíjese en el div con la condición * ngIf = ”show”. Si la variable show tiene el valor true, se ejecutará el código de las etiquetas internas. En nuestro caso se mostrará el frame. Esto es para no mostrar un frame vacío cuando la página se cargue por primera vez. Además, cuando selecionemos el informe y hagamos clic en el botón Show Report, se mostrará el frame con el informe.

En los atributos del frame establezca la fuente desde la variable url. Lo interesante es que “normalicemos” esta variable con la función safeUrl aplicándola a través de la tubería. Esta función nos permitirá comprobar url para saber si hay seguridad y caracteres válidos y la llevará a una forma adecuada. Vamos a cosiderarla detalladamente más tarde.

Y ahora fíjese en el script del componente app.component.ts que realiza el procesamiento de los modelos considerados anteriormente:

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

import { Component } from '@angular/core';
 
 @Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'app';
 show: boolean = false;
 url: string;
 report: string;
 
 Clicked() {
 if (this.report != null) {
 this.show = true;
 this.url = "api/SampleData/ShowReport?name=" + this.report;
 }
 }
}

Aquí tenemos declaradas las variables show y url que ya hemos visto en el modelo de la página, así como la variable report que contiene el nombre del informe seleccionado. La función Clicked() establece el valor true para la variable show, así como establece la ruta para el informe en la variable url.

Y ahora cree la función safeUrl que hemos utilizado en la tubería con el valor url. En el directorio app, archivo safeUrl.pipe.ts:

1
2
3
4
5
6
7
8
9
10

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
 
@Pipe({ name: 'safeUrl' })
export class SafeUrlPipe implements PipeTransform {
 constructor(private sanitizer: DomSanitizer) { }
 transform(url) {
 return this.sanitizer.bypassSecurityTrustResourceUrl(url);
 }
}

Para utilizar esta función en el modelo de la página, añada la declaración de esta tubería-módulo a app.module.ts:

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { SafeUrlPipe } from "./safeUrl.pipe";
import { AppComponent } from './app.component';
 
@NgModule({
 declarations: [
 AppComponent,
 SafeUrlPipe
 ],
 imports: [
 BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
 HttpClientModule,
 FormsModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

COn esto terminamos de trabajar en la aplicación de demostración. Ejecútela:

Primero hay que seleccionaruno de los informes y hacer clic en el botón:

Y ahora selecione otro informe y haga clic en el botón:

De esta manera, ya sabe que el uso del generador de informes FastReport.Core en una aplicación de única página Angular no es mucho más difícil que en una aplicación ASP .Net Core.