Cómo utilizar Online Designer con FR.Core en una aplicación de única página Vue.js

En este artículo vamos a echar un vistazo a cómo mostrar el diseñador de informes en línea en una aplicación escrita en un Framework Vue.Js junto con ASP.Net Core.

Para crear una aplicación de una combinación así, tenemos que instalar Microsoft Visual Studio 2017 o .Net Core 2.0 SDK, así como los paquetes de Node.js.

1. Cree una aplicación Vue.js. Para ello, arranque la línea de ordenes de Windows. Compruebe si tiene un modelo instalado para crear este tipo de aplicación. Para ello, ejecute la siguiente orden:

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

Como consecuencia, veremos la siguiente lista:

Ahora vamos a la carpeta en la que queremos cerar una aplicación utilizando la orden cd. Y cree una aplicación con la instrucción:

dotnet new vue -o FRCoreVueOnlineDesigner

Esta orden creará una aplicación demo con toda la estructura de ficheros y carpetas necesarias.

Después, pase a la carpeta FRCoreVueOnlineDesigner con cd y arranque la siguiente orden:

npm install.

3. Abra el proyecto creado en VisualStudio. Antes de empezar, instale los paquetes NuGet necesarios. En el administrador de paquetes seleccione almacenamiento local <C\Program Files (x86)\FastReports\FastReport.Net\Nugets>. Instalamos dos paquetes de este repositorio: FastReport.Core y FastReport.Web.

A continuación, activamos las bibliotecas FastReport en el configurador. Editamos el archivo tartup.cs. Añada siguiente en el método Configure:

app.UseFastReport ();

En la carpeta wwwroot cree el directorio App_Data y añada modelos de informe y una base de datos .xml a este.

Además, en wwwroot tenemos que incluir una carpeta con un diseñador en línea que se descarga desde el sitio web del desarrollador. Fíjese, por favor: a la hora de configurar un diseñador en línea, antes de compilarlo, hay que seleccionar en la sección Configuración el valor para URLs API – FastReport.Core para Web. Después de descargar el archivo con el diseñador, extraiga los contenidos a la carpeta wwwroot.

3. La programación del controlador. La aplicación tiene ya dos controladores, HomeController ySampleDataController. Vamos a utilizar el segundo y añadimos nuestros propios métodos a este:

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

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNetCore.Mvc;
using FastReport.Web;
using Microsoft.AspNetCore.Hosting;
using System.IO;
 
namespace FRCoreVueOnlineDesigner.Controllers
{
 [Route("api/[controller]")]
 public class SampleDataController : Controller
 {
 private IHostingEnvironment _env;
 public SampleDataController(IHostingEnvironment env)
 {
 _env = env;
 }
 
 [HttpGet("[action]")]
 public IActionResult Design(string name)
 {
 var webRoot = _env.WebRootPath;
 WebReport WebReport = new WebReport();
 WebReport.Width = "1000";
 WebReport.Height = "1000";
 if (name != "Blank")
 WebReport.Report.Load(System.IO.Path.Combine(webRoot, (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(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
 WebReport.Mode = WebReportMode.Designer; // Set the web report object mode - designer display
 WebReport.DesignerLocale = "en";
 WebReport.DesignerPath = @"WebReportDesigner/index.html"; // We set the URL of the online designer
 WebReport.DesignerSaveCallBack = @"api/SampleData/SaveDesignedReport"; // Set the view URL for the report save method
 WebReport.Debug = true;
 ViewBag.WebReport = WebReport; // pass the report to View
 return View();
 }
 
 [HttpPost("[action]")]
 // call-back for save the designed report
 public IActionResult SaveDesignedReport(string reportID, string reportUUID)
 {
 var webRoot = _env.WebRootPath;
 ViewBag.Message = String.Format("Confirmed {0} {1}", reportID, reportUUID); // We set the message for representation
 Stream reportForSave = Request.Body; // Write the result of the Post request to the stream.
 string pathToSave = System.IO.Path.Combine(webRoot, @"App_Data/TestReport.frx"); // get the path to save the file
 using (FileStream file = new FileStream(pathToSave, FileMode.Create)) // Create a file stream
 {
 reportForSave.CopyTo(file); // Save the result of the query to a file }
 return View();
 }
}

El método Designer está diseñado para mostrar el diseñador en línea. Y el método SaveDesignedReport guarda el informe modificado en el servidor.

4. Visualización. Para cada de los dos métodos añadidos hay que crear vistas de un mismo nombre:

Añada el siguiente código al fichero Design.cshtml:

@await ViewBag.WebReport.Render()

Añada el siguiente código al fichero SaveDesignedReport.cshtml:

@ViewBag.Message

5. Programación en el lado del cliente. La carpeta <ClientApp → components> contiene componentes – las "páginas" de nuestra aplicación de única página. Cree su propio componente. Añada una carpeta designer. Cree un fichero online_designer.vue.html en esta que es el modelo de la página.

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

<template>
 <div>
 <input type="radio" :id="reportChoice1" name="report" value="Matrix" v-on:click="SetReportName('Matrix')">
 <label :for="reportChoice1">Matrix</label>
 
 <input type="radio" :id="reportChoice2" name="report" value="Matrix" v-on:click="SetReportName('Master-Detail')">
 <label :for="reportChoice2">Master-Detail</label>
 <input type="radio" :id="reportChoice2" name="report" value="Matrix" v-on:click="SetReportName('Barcode')">
 <label :for="reportChoice2">Barcode</label>
 <button v-on:click="Clicked">Design</button>
 <div v-html="designer"></div>
 </div>
</template>
 
<script src="./online_designer.ts"></script>

En el modelo hay tres botones de rádio que dan nombre al informe. Otro botón activa la función Clicked que debe solicitar el diseñador de informes al servidor. A continuación el código muestra los contenidos de la variable designer. Esta variebale tendrá el resultado de una solicitud get desde el diseñador. Debajo declaramos un script para procesar este modelo. Estará en el archivo separado online_designer.ts.

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

import Vue from 'vue';
import { Component } from 'vue-property-decorator';
 
@Component
export default class DesignerComponent extends Vue {
 designer: string = '';
 report: string = '';
 
 Clicked() {
 if (this.report != '') {
 fetch('api/SampleData/Design?name=' + this.report)
 .then(response => response.text())
 .then(data => {
 this.designer = data;
 });
 }
 }
 SetReportName(text: string)
 {
 this.report = text;
 }
}

La función Clicked hace una solicitud get del método web en el controlador SampleData.El método web devuelve una vista en el formato HTML que escribimos en la variable designer. La función SetReportName establece la variable report que es el nombre del informe. Esta variable se pasa a la solicitud get desde el diseñador como parametro.

Como la aplicación se genera aquí automaticamente, hay páginas demo. Vamos a eliminarlas del menú navmenu.vue.html:

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

<template>
 <div class="main-nav">
 <div class="navbar navbar-inverse">
 <div class="navbar-header">
 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <a class="navbar-brand" href="/">FRCoreVueOnlineDesigner</a>
 </div>
 <div class="clearfix"></div>
 </div>
 </div>
</template> 
 
<style src="./navmenu.css" />

Ahora añadimos nuestro componente a boot.ts:

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

 import './css/site.css';
import 'bootstrap';
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
 
const routes = [
 { path: '/', component: require('./components/online_designer/online_designer.vue.html') }
];
 
new Vue({
 el: '#app-root',
 router: new VueRouter({ mode: 'history', routes: routes }),
 render: h => h(require('./components/app/app.vue.html'))
});

Hemos añadido un hipervínculo al componente creado. Se aparecerá a la hora de arrancar la aplicación web, es decir, será una página dinámica. Arrancamos nuestra aplicación. Seleccionamos informe con el botón de radio y hacemos clic en el botón Design:

Abrimos otro informe, pasamos a la pestaña Report y pulsamos el botón Save:

De esta manera, hemos aprendido cómo mostrar un diseñador en línea en una aplicación de única página escrita en un Framework Vue.Js.