logo
small logo
  • Producto
  • Comprar
  • Ayuda
  • About
  • Consola de usarios Ayuda
    • en
    • de
    • JP
    • ZH
  • Página principal
  • /
  • Blogs
  • /
  • Cómo utilizar WebReport en una aplicación Knockout.js
  • Cómo actualizar el informe web FastReport.Core

    21 de septiembre de 2020

    A veces es necesario actualizar el informe, por ejemplo, si ingresa un nuevo valor de

    read more
  • Personalización de la barra de herramientas y configuración de exportación en FastReport.Web para Core

    6 de septiembre de 2021

    Nuestros usuarios a menudo necesitan cambiar la apariencia de la barra de herramientas o personalizar

    read more
  • Cómo representar algunos informes en una página en Blazor

    12 de julio de 2022

    Muy a menudo nuestros usuarios necesitan representar dos informes con datos diferentes en una página.

    read more
  • How to hide unnecessary items from the Web Report toolbar

    3 de junio de 2020

    Most advanced report generators let us generate reports for web applications. When displaying reports to

    read more
  • La personalización de funciones extendidas de exportación en FastReport.Web for Core y Blazor Server

    6 de diciembre de 2021

    Muy a menudo nuestras usuarias necesitan modificar los parámetros de exportación del archivo, esto

    read more

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

29 de julio de 2019

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. 

about product comprar
avatar
Dmitriy Fedyashov
Technical Writer
Fast Reports Team: Dmitriy Fedyashov - Technical Writer at Fast Reports
.NET FastReport WebReport Knockout

Add comment
logo
  • 800-985-8986 (English, US)
  • +4930568373928 (German)
  • +55 19 98147-8148 (Portuguese)
  • info@fast-report.com
  • 901 N Pitt Str #325 Alexandria VA 22314
  • Comprar
  • Descargar
  • Documentación
  • Opiniones de usuarios
  • Cómo desinstalar nuestros productos
  • FAQ
  • Toturial en vídeo
  • Foro
  • Documentación técnica
  • Nuestras noticias
  • Quiénes somos
  • Socios
  • Extended licensing
  • Contactos

© 1998-2023 by Fast Reports Inc.

  • Privacidad