logo
small logo
  • Producto
  • Comprar
  • Ayuda
  • About
  • Consola de usarios Ayuda
    • en
    • de
    • JP
    • ZH
  • Página principal
  • /
  • Blogs
  • /
  • Informes y documentos PDF en Blazor
  • Paquetes FastReport .NET y .NET 5.0

    17 de diciembre de 2020

    UPD: Se aplica a las versiones de FastReport. NET anteriores a 2022.2. Los paquetes 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
  • Working with NuGet packages in FastReport

    22 de noviembre de 2021

    UPD: Applies to the versions of FastReport .NET before 2022.2. License packages are now available

    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 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

Informes y documentos PDF en Blazor

5 de abril de 2021

Microsoft ha lanzado recientemente una plataforma web llamada Blazor. Este marco permite crear una interfaz web interactiva con el lenguaje C #, así como HTML y CSS. Blazor tiene una gran demanda y rápidamente gana popularidad entre muchos desarrolladores de .NET. Hemos actualizado el paquete FastReport.Web, agregando componentes Blazor para trabajar con informes en aplicaciones web basadas en tecnología Blazor Server. Estos componentes se usan en .NET Core 3.1 (y versiones posteriores) y están en estado beta y se mejorarán con el tiempo.

A continuación describimos cómo crear una aplicación web sencilla basada en la tecnología Blazor Server. Puede descargar este proyecto de demostración en mi perfil en GitHub.

Para empezar, creamos nuestro nuevo proyecto. Usaremos una plantilla lista para Blazor Server. Puede crear un proyecto con Visual Studio (tanto para Windows como para macOS) o con .NET CLI. En ambos casos, necesitaremos .NET Core SDK (.NET SDK) versión 3.1 o posterior, que se puede descargar del sitio web oficial de Microsoft.

Visual Studio 2019:

Visual Studio 2019

Para .NET CLI escribimos el siguiente comando en la consola (terminal):

dotnet new blazorserver

Vemos la siguiente estructura de proyecto:

Vemos la siguiente estructura del proyecto

Para simplificar el proyecto, eliminamos algunos archivos innecesarios de la plantilla creada:

- toda la carpeta de datos
- Páginas \ Counter.razor
- Páginas \ FetchData.razor
- Shared \ SurveyPrompt.razor

Añadimos una nueva carpeta llamada "Informes" a la carpeta de nuestro proyecto y colocamos todos los informes necesarios en ella. Para la demostración, he añadido informes simples que se aplican durante la instalación de la versión de demostración de FastReport: Simple List, Complex (Master-detail + Group), Subreport, Barcode y Chart. Además, para estos informes necesitamos una base de datos en formato xml - nwind.xml; lo colocamos en la misma carpeta Reports.

FastReport.Web.Blazor

Además, es necesario que el contenido de la carpeta Reports se pueda copiar en la carpeta de salida; para eso, seleccionamos los archivos relevantes en Visual Studio y “Copiar si es más reciente” en Propiedades.

FastReport.Web.Blazor

Si no hay Visual Studio, puede indicar manualmente esta propiedad en el archivo del proyecto (.csproj):

<ItemGroup>
 <None Update="Reports\*.*">
 <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
 </None>
 </ItemGroup>

Luego tenemos que añadir los paquetes FastReport.Core y FastReport.Web a nuestro proyecto. Esto también se puede hacer a través de Visual Studio o mediante .NET CLI. Consideremos ambas variantes.

Para añadir un paquete a Visual Studio, haga clic con el botón derecho del ratón en nuestro archivo de proyecto (csproj). Se abre un menú contextual; seleccione "Manage NuGet packages". Busque los dos paquetes necesarios. Tenga en cuenta que la marca "Incluir presentación preliminar" debe estar activa.

Search FastReport.Web

Para añadir un paquete a través de .NET CLI, escriba los siguientes comandos:

dotnet add package FastReport.Core --prerelease
dotnet add package FastReport.Web --prerelease

Luego, debemos añadir los espacios de nombres utilizados por FastReport.Core y FastReport.Web a la lista de espacios de nombres de archivos utilizados para Razor. Para eso, edite el archivo _Imports.razor añadiendo varias líneas:

@using FastReport
@using FastReport.Web @using FastReport.Web.Blazor.Components

Registre FastReport en la configuración de nuestra aplicación. Para hacer eso, abra el archivo Startup.cs y agregue la siguiente línea al final del método Configurar:

app.UseFastReport();

En el archivo Pages \ _Host.cshtml, sustituya la primera línea por lo siguiente:

@page "/{ReportName}"

Esto es necesario para que la URL pueda contener el nombre del informe que queremos abrir.

Luego, editamos el menú de navegación Shared \ NavMenu.razor para mapear todos los informes disponibles en la carpeta Informes y alternar entre ellos.

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
@using System.IO
 
<div class="top-row pl-4 navbar navbar-dark">
 <a class="navbar-brand" href="">DemoBlazor</a>
</div>
 
<div>
 <ul class="nav flex-column">
 @foreach (string report in reports)
 {
 <li class="nav-item px-2">
 <NavLink class="nav-link" href="@report">
 @Path.GetFileNameWithoutExtension(report)
 </NavLink>
 </li>
 }
 </ul>
</div>
 
@code {
 // List of reports in folder
 private string[] reports =
 Directory.GetFiles(
 Path.Combine(
 Directory.GetCurrentDirectory(), "Reports"))
 .Where((filename) => Path.GetExtension(filename) == ".frx")
 .Select((filename) => Path.GetFileName(filename))
 .ToArray();
}

Ahora llegamos al escenario principal. Edite el archivo Pages \ Index.razor para asignar informes con el componente principal de la biblioteca FastReport.Web.Blazor: WebReportContainer. Escriba lo siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
@page "/"
@page "/{ReportName}"
 
<WebReportContainer WebReport="@MyWebReport" />
 
@code {
 [Parameter]
 public string ReportName { get; set; }
 
 public WebReport MyWebReport { get; set; }
}
 

Hemos agregado el componente WebReportContainer y le hemos atribuido una propiedad única: un objeto de la clase WebReport.

Creemos otro archivo con un nombre similar - Index.razor.cs junto al archivo Pages \ Index.razor y escribamos una lógica simple en él:

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
using System.IO;
using System.Data;
using FastReport;
using FastReport.Web;
 
namespace DemoBlazor.Pages
{
 public partial class Index
 {
 const string DEFAULT_REPORT = "Simple List.frx";
 readonly string directory;
 
 DataSet DataSet { get; }
 
 protected override void OnParametersSet()
 {
 base.OnParametersSet();
 
 var report = Report.FromFile(
 Path.Combine(
 directory,
 string.IsNullOrEmpty(ReportName) ? DEFAULT_REPORT : ReportName));
 
 // Registers the user dataset
 report.RegisterData(DataSet, "NorthWind");
 
 // Create new WebReport object
 MyWebReport = new WebReport
 {
 Report = report,
 };
 }
 
 public Index()
 {
 directory = Path.Combine(
 Directory.GetCurrentDirectory(),
 Path.Combine("Reports"));
 
 DataSet = new DataSet();
 DataSet.ReadXml(Path.Combine(directory, "nwind.xml"));
 }
 }
}

Esta lógica se encarga de registrar datos, crear un objeto WebReport, atribuirle los parámetros necesarios, incluido el propio Report que descargamos ya sea del nombre del informe en la línea de consulta o utilizamos por defecto, definido en la constante DEFAULT_REPORT.

Después de las manipulaciones menores restantes con el estilo y el formato, obtenemos una aplicación web que puede manejar informes y brinda la oportunidad de crear documentos en varios formatos (PDF, Excel, Word y Open Office).

FastReport.Web.Blazor

Enlaces útiles:

- Documentación (en inglés): https://www.fast-report.com/public_download/docs/FRNet/online/en/ProgrammerManual/en-US/UsingBlazor.html
- Demostración en línea: https://fastreportwebblazor.azurewebsites.net/
- Paquete NuGet: https://www.nuget.org/packages/FastReport.Web

about product comprar
avatar
Kirill Kornienko
.NET Development
Fast Reports Team: Kirill Kornienko - NET Development at Fast Reports
.NET Visual Studio FastReport Core C# Blazor

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
  • Support SLA
  • Documentación técnica
  • Nuestras noticias
  • Quiénes somos
  • Socios
  • Extended licensing
  • Contactos

© 1998-2023 by Fast Reports Inc.

  • Privacidad

Trustpilot