Cómo utilizar WebReport en una aplicación Knockout.js

La biblioteca .Knockout.js se utiliza para crear aplicaciones web. Como hay soporte de esta biblioteca en Microsoft Visual Studio, podemos utilizar TypeScript y el motor basado en ASP.Net Core MVC. Esto último quiere decir que podemos utilizar informes FastReport.Net.Solo tenemos que mostrar el informe en la aplicación del cliente. Es lo que vamos a hacer en este artículo.

Para utilizar knockout con .Net Core, necesita tiener instalado .Net Core SDK 2.0 o MS Visual Studio. Por defecto, el modelo de aplicación con la biblioteca knockout no está disponible. Por lo tanto, hay que instalarlo con un solo comando . Introduzca en la línea de comandos los siguiente:

dotnet new — install Microsoft.AspNetCore.SpaTemplates::*

Después de ello, puede crear una aplicación spa basada en knockout. En la carpeta deseada abra la línea de comandos y introduzca el comando:

dotnet new knockout –o KnockWebReport

Después de crear la aplicación, pase a la carpeta con la aplicación creada y restaure las bibliotecas necesarias utilizando el siguiente comando:

npm install

Ahora puede abrir el proyecto creado. Nuestro objetivo es crear un informe web FastReport. Por lo tanto, instalamos los paquetes FastReport. Para ello, abra el administrador de paquetes y configure la fuente de paquetes local para la carpeta Nuget en el directorio de instalación FastReport.Net. Después de ello, tenemos un conjunto de paquetes FastReport que están disponiblespara instalarlos. Instale FastReport.Core y FastReport.Web.

Añada la carpeta App_Data al directorio wwwroot. En esta ubicamos el archivo de la base de datos para informes:

Vamos a utilizar el controlador SampleDataController que ya existe. Elimine todos los métodos que tiene y añada nuestro propio:

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

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using FastReport.Web;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using System.IO;
 
namespace KnockWebReport.Controllers
{
 [Route("api/[controller]")]
 public class SampleDataController : Controller
 {
 private IHostingEnvironment _env;
 public SampleDataController(IHostingEnvironment env)
 {
 _env = env;
 }
 [HttpGet("[action]")]
 public IActionResult ShowReport(string name)
 {
 var webRoot = _env.WebRootPath;
 WebReport WebReport = new WebReport();
 WebReport.Width = "1000";
 WebReport.Height = "1000";
 WebReport.Report.Load(System.IO.Path.Combine(webRoot, (String.Format("App_Data/{0}", name)))); // Load the report into the WebReport object
 
 System.Data.DataSet dataSet = new System.Data.DataSet(); // Create a data source
 dataSet.ReadXml(System.IO.Path.Combine(webRoot, "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();
 }
 
 [HttpPost("[action]")]
 public async Task<IActionResult> Upload(List<IFormFile> files)
 {
 long size = files.Sum(f => f.Length);
 var webRoot = _env.WebRootPath;
 var filePath = System.IO.Path.Combine(webRoot, (String.Format("App_Data/{0}", files[0].FileName)));
 
 if (files[0].Length > 0)
 {
 using (var stream = new FileStream(filePath, FileMode.Create))
 {
 await files[0].CopyToAsync(stream);
 stream.Close();
 }
 }
 Task.WaitAll();
 return Content(Path.GetFileName(filePath));
 }
 }
}

El método ShowReport carga el modelo de informe especificado en el objeto WebReport y lo muestra. Y el método Upload recibe el archivo del cliente, lo guarda en el servidor y lo retorna el nombre del archivo guardado.

Para el método ShowReport creamos una vista:

Con el siguiente código:

1

 @await ViewBag.WebReport.Render()

Ahora pasamos a la aplicación del cliente. Está en la carpeta ClientApp:

Vamos a utilizar la página principal para mostrar el informe. Edite el código en el archivo home-page.html:

1
2
3
4
5
6

<div id="app">
 <input type="file" id="FileName" accept=".frx" data-bind="event: { change: upload($element.files[0]) }" />
</div>
<div data-bind="if: show">
 <iframe id="report" height="1000" width="1000" data-bind="attr: {src: url}"></iframe>
</div>

Mostramos el botón que abre la ventana estándar de abrir archivo. Y, además, dependiendo del valor del parámetro lógico show, mostramos el frame con el objeto web del informe.

Ahora vamos a escribir un script para este modelo en el archivo home-page.ts.

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

import * as ko from 'knockout';
 
class HomePageViewModel {
 public show = ko.observable(false);
 public url = ko.observable('');
 
 upload(file: Blob) {
 var files = new FormData();
 files.append("files", file)
 console.log(files);
 if (file != null) {
 fetch('api/SampleData/Upload', {
 method: 'POST',
 body: files
 })
 .then(response => response.text())
 .then(data => {
 this.url("api/SampleData/ShowReport?name=" + data)
 });
 this.show(true);
 }
 }
}
 
export default { viewModel: HomePageViewModel, template: require('./home-page.html') };

En este script implementamos la función de cargar un archivo en el servidor.

Se realiza una solicitud POST y, como resultado, recibimos desde el servidor el nombre del archivo guardado. A continuación, asignamos a la variable url la ruta del método de mostrar informe teniendo en cuenta el nombre del informe recibido. Resulta que tenemos un informe web.

Vamos a arrancar nuestra aplicación para ver que tenemos.

Seleccione el archivo del informe en la extensión .frx.

Y ya tenemos un informe en su página web.

En este script implementamos la función de cargar un archivo en el servidor.