Informes y documentos PDF en Blazor

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:

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

dotnet new blazorserver

Vemos la siguiente estructura de 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.

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.

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.

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

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