Cómo utilizar FastReport.Core en euna aplicación Vue.js

EL Framework Vue.js ahora es muy popular junto con Angular. Ya hemos considerado cómo utilizar FastReport.Core en una aplicación ANgular y en este artículo vamos a ver cómo implementar la visualización de un informe web FastReport en una aplicación de única página Vue.js en un motor en ASP .Net Core.

Para tener el trabajo hecho, tenemos que instalar Node.js y Net Core SDK 2.0 o más "fresco". Por defecto dotnet sdk no tiene modelo de aplicación vue. Pero puede instalarlo. Para eso, cree un directorio en el que quiere situar su aplicación de futuro y ejecute la orden PowerShell. Esto se puede hacer desde el menú de contexto que se invoca haciendo clic con el botón derecho en el espacio vacío en la carpeta con el mayús pulsado simultáneamente.

En la línea de órdenes, introduzca la orden:

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

Después de ello, el modelo Vue estará a su diposición para generar una aplicación demo.

Utilícelo y cree una aplicación con la siguiente orden:

dotnet new vue -o FRCoreVue

Después de crear la aplicación, aparecerá un aviso de que tenga que ejecutar la orden:

npm install

Pero antes de ejecutarla, tiene necesita ir al directorio creado:

cd FRCoreVue

Después de instalar todos los paquetes necesarios, abra el archivo de proyecto .csproj.

Para trabajar con FastReport, instale paquetes en el administrador NuGet. Seleccione la fuente de paquetes que está en la carpeta <J:\Program Files (x86)\FastReports\FastReport.Net\Nugets>.

Instale los paquetes FastReport.Core y FastReport.Web.

Para mostrar los informes, necesitamos modelos de informes y la fuente de datos para ellos. Por lo tanto, e el directorio wwwroot cree una carpeta App_Data y situe allí modelos de informes que quiera y la base de datos (si está utilizando una fuente de datos de archivo).

En el archivo Startup.cs añada la siguiente línea de código al método Configure:

app.UseFastReport();

En la carpeta Controllers abra el archivo SampleDataController.cs. En esta clase ya hay unos métodos demo. No los necesitamos y los podemos eliminar sin vacilar. En lugar de ellos, añada su propio método:

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

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNetCore.Mvc;
using FastReport.Web;
using Microsoft.AspNetCore.Hosting;
 
namespace FRCoreVue.Controllers
{
 [Route("api/[controller]")]
 public class SampleDataController : Controller
 {
 private IHostingEnvironment _env;
 
 public SampleDataController(IHostingEnvironment env)
 {
 _env = env;
 }
 
 [HttpGet("[action]")]
 public IActionResult DisplayReport(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}.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
 ViewBag.WebReport = WebReport; // pass the report to View
 return View();
 }
}

El método DisplayReport toma el parámetro“name” que es el nombre del informe. Así, este método carga el modelo de informe deseado en el objeto WebReport. Haga clic con el botón derecho en el método de firma y en el menú seleccione "Add view ..."

Aparecerá la ventana de la creación de vista. Simplemente haga clic en "Ok". Remplace el código en la ventana creada por el siguiente:

1

@await ViewBag.WebReport.Render()

Ahora pasamos a la aplicación cliente en Vue. En el proyecto tree expanda la carpeta <ClientApp → components>. Aquí están los componentes pages, menus, etc. Vamos a crear nuestro propio componente. Añada una carpeta report en la que cree un archivo report.vue.html.

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

<template>
 <div>
 <div id="app">
 <select v-model="report">
 <option>Matrix</option>
 <option>Master-Detail</option>
 <option>Barcode</option>
 </select>
 </div>
 <button v-on:click="Clicked">Show Report</button>
 <div v-if="show">
 <iframe :id="report" height="1000" width="1000" :src="url"></iframe>
 </div>
 </div>
</template>
 
<script src="./report.ts"></script>

El modelo de la página mostrará una lista desplegable de informes. Si selecciona un valor y hace clic en el botón Show Report se mostrará un frame con el informe. El variable-flag show desempeña la función de mostrar el frame. Por defecto, su valor es false y el frame no se muestra. Pero después de cargar el informe, su valor cambiará a true y el frame se mostrará. Ahora vamos a implementar el script para procesar el modelo report.ts que vamos a añadir a la misma carpeta del informe:

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

import Vue from 'vue';
import { Component } from 'vue-property-decorator';
 
@Component
export default class ReportComponent extends Vue {
 report: string = 'Matrix';
 url: string = '';
 show: boolean = false;
 
 Clicked() {
 if (this.report != null) {
 this.show = true;
 this.url = "api/SampleData/DisplayReport?name=" + this.report;
 }
 }
}

La variable report tiene un valor por defecto para que se la seleccione inicialmente en el la lista desplegable. La función Clicked forma un hepervínculo al método en el controlador basado en el nombre del informe seleccionado, así como establece el valor del flag show.

Ahora elimine los hipervínculos innecesarios a las páginas demo desde el menú lateral del sitio en el archivo navmenu.vue.html:

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

<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="/">FRCoreVue</a>
 </div>
 </div>
 </div>
</template>
 
<style src="./navmenu.css" />

Edite también el archivo boot.ts donde están cargados los componentes:

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/report/report.vue.html') }
];
 
new Vue({
 el: '#app-root',
 router: new VueRouter({ mode: 'history', routes: routes }),
 render: h => h(require('./components/app/app.vue.html'))
});

Ahora nuestro componente se mostrará en la página principal. Arranque la aplicación.

Vemos una página en blanco con una lista desplegable y un botón. Expanda la lista desplegable:

Tenemos tres informes disponibles. Seleccione Master-Detail y haga clic en el botón Show Report:

Aquí tenemos un informe. Al mismo tiempo, todas las funciones de la barra de herramientas del informe web están a nuestra disposición. Por ejemplo, la posibilidad de exportar:

Así, hemos implementado la visualización de un informe web en una aplicación de única página en Vue.js. Como ve, la implementación es bastante fácil gracias a la conexión ajustada Vue + ASP .Net Core.