Crear un Archivo PDF con Tutorial para Blazor

Crear un nuevo proyecto en Visual Studio

Para comenzar, abre la aplicación Microsoft Visual Studio y selecciona "Nuevo Proyecto" desde el menú Archivo. Luego, selecciona "Blazor Server App".

¡Crear un archivo PDF con Blazor Tutorial, Figura 1: Creando un nuevo proyecto en Visual Studio Creando un nuevo proyecto en Visual Studio

Ingresa un nombre de proyecto y selecciona una ruta de archivo. Luego, haz clic en el botón Create.

¡Crear un archivo PDF con Blazor Tutorial, Figura 2: Eligiendo el nombre y la ubicación de la nueva Aplicación Blazor Eligiendo el nombre y la ubicación de la nueva Aplicación Blazor

Selecciona el marco .NET deseado (utilizaremos .NET 6.0 en este tutorial), como se muestra en la captura de pantalla a continuación:

¡Crear un archivo PDF con Blazor Tutorial, Figura 3: Creando un Nuevo Proyecto en Visual Studio con el marco .NET 6.0 Creando un Nuevo Proyecto en Visual Studio con el marco .NET 6.0

Microsoft Visual Studio ahora generará la estructura para esta aplicación Blazor.

A continuación, añade la biblioteca IronPDF a este nuevo proyecto.

3.1 Uso del gestor de paquetes NuGet de Visual Studio

Visual Studio proporciona el Administrador de Paquetes NuGet para ayudar en la instalación directa de bibliotecas en proyectos. La captura de pantalla a continuación muestra cómo abrir el Gestor de Paquetes NuGet.

¡Crear un Archivo PDF con Blazor Tutorial, Figura 4: Accediendo al Administrador de Paquetes NuGet de Visual Studio Accediendo al Administrador de Paquetes NuGet de Visual Studio

Usa el campo de búsqueda en la pestaña Examinar para buscar "IronPDF", como se muestra en la captura de pantalla a continuación:

¡Crear un Archivo PDF con Blazor Tutorial, Figura 5: Buscando la biblioteca IronPDF en la GUI del Administrador de Paquetes NuGet Buscando la biblioteca IronPDF en la GUI del Administrador de Paquetes NuGet

En la imagen anterior, se muestra la lista de resultados de búsqueda relacionados. Selecciona las opciones requeridas para instalar el paquete en tu proyecto.

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

En Visual Studio, ve a Herramientas > Administrador de Paquetes NuGet > Consola del Administrador de Paquetes

Ingresa la siguiente línea en la pestaña de la Consola del Administrador de Paquetes:

Install-Package IronPdf

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

¡Crear un Archivo PDF con Blazor Tutorial, Figura 6: Instalando la biblioteca IronPDF usando la Consola del Administrador de Paquetes NuGet Instalando la biblioteca IronPDF usando la Consola del Administrador 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 desde el sitio web.

Navega al sitio web de NuGet para IronPDF.

• Haz clic en la opción "Download Package" del menú en el lado derecho.
• Abre el paquete descargado en tu sistema de archivos. Se instalará automáticamente.
• Recarga la solución y empieza a usarla en tu proyecto.

3.4 Descarga directa desde el sitio web de IronPDF

Visita el sitio web de IronPDF para descargar el paquete IronPDF directamente.

Después de descargar, sigue estos pasos para añadir el paquete a tu proyecto:

• Haz clic derecho en el proyecto desde la ventana de la solución.
• Selecciona la opción "Agregar" > "Referencia" y luego navega a la ubicación de la biblioteca que descargaste anteriormente.
• Haz clic en OK para agregar la biblioteca como referencia.

4. Crear documentos PDF en la aplicación Blazor Server

La aplicación Blazor en este tutorial usará IronPDF para obtener el contenido HTML de una página web por su URL y convertirlo en un documento PDF.

Introduce el siguiente código fuente en el archivo .razor contenido en el proyecto.

@using IronPdf

@code {
    /// <summary>
    /// This method exports data by converting a URL to a PDF file and initiating its download.
    /// </summary>
    public async Task ExportData()
    {
        try
        {
            string fileName = "Demo.pdf";
            var renderer = new ChromePdfRenderer();

            // Render the contents of the URL as a PDF document
            var pdf = renderer.RenderUrlAsPdf("https://localhost:7018/fetchdata");

            // Save the PDF using a JavaScript function
            await JSRuntime.InvokeVoidAsync("saveAsFile", fileName, Convert.ToBase64String(pdf.Stream.ToArray()));
        }
        catch (Exception ex)
        {
            // Handle any exceptions that may occur
            Console.Error.WriteLine($"Error in ExportData: {ex.Message}");
        }
    }
}

@using IronPdf

@code {
    /// <summary>
    /// This method exports data by converting a URL to a PDF file and initiating its download.
    /// </summary>
    public async Task ExportData()
    {
        try
        {
            string fileName = "Demo.pdf";
            var renderer = new ChromePdfRenderer();

            // Render the contents of the URL as a PDF document
            var pdf = renderer.RenderUrlAsPdf("https://localhost:7018/fetchdata");

            // Save the PDF using a JavaScript function
            await JSRuntime.InvokeVoidAsync("saveAsFile", fileName, Convert.ToBase64String(pdf.Stream.ToArray()));
        }
        catch (Exception ex)
        {
            // Handle any exceptions that may occur
            Console.Error.WriteLine($"Error in ExportData: {ex.Message}");
        }
    }
}

[using] ReadOnly Property code() As IronPdf
	''' <summary>
	''' This method exports data by converting a URL to a PDF file and initiating its download.
	''' </summary>
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	public async Task ExportData()
'	{
'		try
'		{
'			string fileName = "Demo.pdf";
'			var renderer = New ChromePdfRenderer();
'
'			' Render the contents of the URL as a PDF document
'			var pdf = renderer.RenderUrlAsPdf("https://localhost:7018/fetchdata");
'
'			' Save the PDF using a JavaScript function
'			await JSRuntime.InvokeVoidAsync("saveAsFile", fileName, Convert.ToBase64String(pdf.Stream.ToArray()));
'		}
'		catch (Exception ex)
'		{
'			' Handle any exceptions that may occur
'			Console.@Error.WriteLine(string.Format("Error in ExportData: {0}", ex.Message));
'		}
'	}
End Property

El fragmento de código anterior usa dos métodos para generar documentos PDF desde HTML. El primero es el método RenderUrlAsPdf de IronPDF, que descarga el contenido HTML de una URL dada y lo convierte en formato PDF.

El segundo método es el método estático JSRuntime.InvokeVoidAsync, que activa el motor de JavaScript de un navegador para invocar una función de JavaScript dentro del ámbito de la página web que guarda el contenido PDF en un archivo en el sistema de archivos del cliente.

Esta función de JavaScript se incluye a continuación:

<script type="text/javascript">
    /**
     * Saves the PDF data as a file on the client's system.
     * @param {string} filename - The name of the file to be created.
     * @param {string} bytesBase64 - The Base64 encoded string of the PDF data.
     */
    function saveAsFile(filename, bytesBase64) {
        if (navigator.msSaveBlob) {
            // Download the document in Microsoft Edge browser
            var data = window.atob(bytesBase64);
            var bytes = new Uint8Array(data.length);
            for (var i = 0; i < data.length; i++) {
                bytes[i] = data.charCodeAt(i);
            }
            var blob = new Blob([bytes.buffer], { type: "application/octet-stream" });
            navigator.msSaveBlob(blob, filename);
            window.navigator.msSaveOrOpenBlob(blob);
        }
        else {
            var link = document.createElement('a');
            link.download = filename;
            link.href = "data:application/octet-stream;base64," + bytesBase64;
            document.body.appendChild(link); // Needed for Firefox
            link.click();
            document.body.removeChild(link);
        }
    }
</script>

<script type="text/javascript">
    /**
     * Saves the PDF data as a file on the client's system.
     * @param {string} filename - The name of the file to be created.
     * @param {string} bytesBase64 - The Base64 encoded string of the PDF data.
     */
    function saveAsFile(filename, bytesBase64) {
        if (navigator.msSaveBlob) {
            // Download the document in Microsoft Edge browser
            var data = window.atob(bytesBase64);
            var bytes = new Uint8Array(data.length);
            for (var i = 0; i < data.length; i++) {
                bytes[i] = data.charCodeAt(i);
            }
            var blob = new Blob([bytes.buffer], { type: "application/octet-stream" });
            navigator.msSaveBlob(blob, filename);
            window.navigator.msSaveOrOpenBlob(blob);
        }
        else {
            var link = document.createElement('a');
            link.download = filename;
            link.href = "data:application/octet-stream;base64," + bytesBase64;
            document.body.appendChild(link); // Needed for Firefox
            link.click();
            document.body.removeChild(link);
        }
    }
</script>

La función de JavaScript anterior recibe los datos Base64 de Blazor y los convierte en un blob antes de guardarlos en la ubicación del lado del cliente.

Alternativamente, el método SaveAs de la clase ChromePdfRenderer también se puede utilizar para guardar documentos PDF en el almacenamiento local del navegador.