Tutorial de Blazor PDF Viewer

Introducción

Adobe creó el formato de documento portátil (PDF)que se utiliza ampliamente para publicar texto e imágenes formateados. En este tutorial, el IronPDF se recomienda para integrar en un Aplicación de servidor Blazor para visualizar un PDF porque es fácil de usar y eficaz.

1. Características de IronPDF

Con la ayuda de la potente biblioteca PDF .NET de IronPDF, los desarrolladores pueden crear, leer y modificar fácilmente un documento PDF. Basado en el motor Chrome integrado IronPDF incluye una amplia gama de funciones útiles y potentes, como la capacidad de convertir HTML5, JavaScript, CSS e imágenes a PDF, la capacidad de añadir encabezados y pies de página personalizados a los PDF y la capacidad de crear PDF que coincidan exactamente con la forma en que aparecen en un navegador web.

IronPDF es compatible con varias tecnologías web, como HTML, ASPX, Razor View y MVC. Estas son las principales características de IronPDF:

• IronPDF ofrece un control total sobre la creación y modificación de archivos PDF en aplicaciones .NET C#.
• IronPDF puede generar archivos PDF de páginas web a partir de su URL utilizando configuraciones específicas de User-Agent, Proxy, Header y Cookie.
• IronPDF puede eliminar imágenes de documentos PDF existentes
• IronPDF puede añadir texto, fotos y marcadores, marcas de agua y otros elementos a documentos PDF
• IronPDF tiene múltiples funciones que pueden fusionar y dividir uno o varios documentos PDF fácilmente
• IronPDF puede comprender y procesar activos multimedia web como CSS y JavaScript.
• IronPDF es compatible con varios marcos de aplicaciones web MVC y de escritorio .NET, incluidos ASP.NET y Blazor

2. ¿Qué es Blazor?

Blazor es un framework experimental de Aplicaciones Web que hace posible la creación de Aplicaciones Web del lado del cliente en C# y HTML utilizando Web Assembly.

Las aplicaciones Web Assembly se envían al navegador en un formato de instrucciones binarias que puede funcionar a una velocidad cercana a la nativa. Esto ha creado nuevas posibilidades para que lenguajes como C# se ejecuten dentro del navegador.

Creación de un nuevo proyecto en Visual Studio

Para empezar, abra la aplicación Microsoft Visual Studio y seleccione "Nuevo proyecto" en el menú Archivo. A continuación, selecciona "Blazor server app".

Creación de un nuevo proyecto en Visual Studio

Introduzca un nombre de proyecto y seleccione una ruta de archivo. A continuación, haga clic en el botón Crear.

Creación de un nuevo proyecto en Visual Studio

Seleccione también el .NET Framework deseado. Se recomienda utilizar la última versión para mayor estabilidad.

Elección del marco .NET 6.0 para la nueva aplicación Blazor Server

Microsoft Visual Studio generará ahora la estructura para la nueva Blazor Server App. Este proyecto incluirá una colección de archivos .razor, en los que se puede introducir el código fuente.

El siguiente paso será añadir la librería IronPDF al proyecto.

3. Instalar la biblioteca IronPDF

La biblioteca IronPDF puede descargarse e instalarse de cuatro maneras:

• Uso del gestor de paquetes NuGet de Visual Studio
• Uso de la línea de comandos de Visual Studio
• Descarga directa desde el sitio web de NuGet
• Descarga directa desde el sitio web de IronPDF

3.1 Uso del gestor de paquetes NuGet de Visual Studio

Visual Studio proporciona el gestor de paquetes NuGet para ayudar a instalar bibliotecas directamente en los proyectos. La siguiente captura de pantalla muestra cómo abrir el Gestor de paquetes NuGet.

Acceso al gestor de paquetes NuGet de Visual Studio

Utilice el campo de búsqueda de la pestaña Examinar para buscar "IronPDF", como se muestra en la siguiente captura de pantalla:

Búsqueda de la biblioteca IronPDF en la interfaz gráfica de usuario del gestor de paquetes NuGet.

La imagen de arriba muestra la lista de los resultados de búsqueda relacionados. Seleccione las opciones necesarias para instalar el paquete en su proyecto.

3.2 Uso de la línea de comandos de Visual Studio

En Visual Studio, vaya a Herramientas > Administrador de paquetes NuGet > Consola del administrador de paquetes.

Introduzca la siguiente línea en la pestaña Package Manager Console:

Install-Package IronPdf

El paquete se descargará e instalará en el proyecto actual.

Instalación de la biblioteca IronPDF mediante la consola del gestor de paquetes NuGet

3.3 Descarga directa desde el sitio web de NuGet

La tercera forma de instalar la biblioteca IronPDF es descargar el paquete NuGet directamente del sitio web.

Vaya a https://www.nuget.org/packages/IronPdf/

• Haga clic en la opción "Descargar paquete" del menú de la derecha.
• Abra el paquete descargado en su sistema de archivos. Se instalará automáticamente.
• Vuelva a cargar la solución y empiece a utilizarla en su proyecto.

3.4 Descarga directa desde el sitio web de IronPDF

Haga clic en este enlace para descargar el último paquete directamente desde el sitio web de IronPDF.

Después de descargarlo, siga estos pasos para añadir el paquete a su proyecto:

• Haga clic con el botón derecho del ratón en el proyecto de la ventana de la solución.
• Seleccione la opción "Referencia" y, a continuación, navegue hasta la ubicación de la biblioteca que descargó anteriormente.
• Haga clic en Aceptar para añadir la biblioteca como referencia.

4. Ver documentos PDF con la aplicación del servidor Blazor

La aplicación Blazor que se construirá en este tutorial creará un documento PDF a partir de la URL de una página web y lo renderizará en el navegador web de un cliente.

Con IronPDF, ver un PDF es muy sencillo.

Añada el siguiente código fuente al archivo .razor correspondiente.

string _imgUrl = "";
private async Task ViewFile()
{
    var renderer = new IronPdf.ChromePdfRenderer();
    var pdf = renderer.RenderUrlAsPdf("https://localhost:7018/fetchdata");
    _imgUrl = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.Stream.ToArray())}";
}

string _imgUrl = "";
private async Task ViewFile()
{
    var renderer = new IronPdf.ChromePdfRenderer();
    var pdf = renderer.RenderUrlAsPdf("https://localhost:7018/fetchdata");
    _imgUrl = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.Stream.ToArray())}";
}

Private _imgUrl As String = ""
Private Async Function ViewFile() As Task
	Dim renderer = New IronPdf.ChromePdfRenderer()
	Dim pdf = renderer.RenderUrlAsPdf("https://localhost:7018/fetchdata")
	_imgUrl = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.Stream.ToArray())}"
End Function

El fragmento de código anterior utiliza en primer lugar IronPDF RenderUrlAsPdf que descarga el contenido HTML de una URL determinada y lo convierte a formato PDF. A continuación, el fragmento de código renderiza el contenido del PDF generado como una cadena de datos base64 sin procesar y lo almacena en una variable local.

Para mayor comodidad, las aplicaciones pueden utilizar la función de IronPDF Guardar como método (disponible en cualquier Renderizador de PDF cromado instancia) para guardar los documentos PDF generados en el sistema de archivos del servidor y poder acceder a ellos más tarde.

El siguiente segmento de código prepara los datos PDF en base-64 para su salida en el navegador del cliente.

@if (_imgUrl != string.Empty)
{
    <iframe src="@_imgUrl" style="width:750px;height:750px;" type="application/pdf"/>
}

@if (_imgUrl != string.Empty)
{
    <iframe src="@_imgUrl" style="width:750px;height:750px;" type="application/pdf"/>
}

'INSTANT VB WARNING: The following constructor is declared outside of its associated class:
'ORIGINAL LINE: if(_imgUrl != string.Empty)
Private Sub New(Optional _imgUrl (Not ByVal) As = String.Empty)
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <iframe src="@_imgUrl" style="width:750px;height:750px;" type="application/pdf"/>
	"width:750px;height:750px;" type="application/pdf"/>
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <iframe src="@_imgUrl" style="width:750px;height:750px;" type
	"@_imgUrl" style="width:750px;height:750px;" type
	<iframe src="@_imgUrl" style
End Sub

La función anterior recibe los datos base64 del lado del servidor de Blazor, vinculándolos al atributo src de un elemento iframe. Al cargar la página, los navegadores utilizan sus visores web integrados para representar el contenido base64 como un documento PDF propiamente dicho.

A continuación se muestra una captura de pantalla del archivo PDF cuando se renderiza a partir de la cadena base64.

Visualización de un PDF generado en una aplicación Blazor en el navegador. Este PDF ha sido creado por IronPDF y enviado al navegador como una cadena base64.

Ver un documento PDF a partir de una cadena HTML

A continuación se ilustra cómo IronPDF puede crear un archivo PDF a partir de una cadena de etiquetas HTML.

var pdf = new IronPdf.ChromePdfRenderer().RenderHtmlAsPdf("<h1>Hello world!!</h1>")

var pdf = new IronPdf.ChromePdfRenderer().RenderHtmlAsPdf("<h1>Hello world!!</h1>")

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'var pdf = New IronPdf.ChromePdfRenderer().RenderHtmlAsPdf("<h1>Hello world!!</h1>")

El documento PDF generado puede visualizarse desde el navegador de un cliente siguiendo el procedimiento detallado en el apartado anterior.

Conclusión

Este artículo muestra cómo desarrollar una aplicación web Blazor que utiliza la librería IronPDF para generar un archivo PDF desde una página web y mostrarlo en el navegador del usuario.

Sin embargo, IronPDF no es de código abierto. clave de prueba gratuita le permite utilizarlo en producción sin marcas de agua.