Implementación de Descarga de Archivos en Blazor: Generación y Descarga de PDFs

Implementación de Descarga de Archivos en Blazor Generación y Descarga de PDFs

En una aplicación Blazor, es común necesitar permitir a los usuarios descargar archivos, como PDFs generados dinámicamente. Aunque Blazor es un framework SPA (Single Page Application) y no maneja directamente las respuestas HTTP tradicionales como en una aplicación MVC normal, puedes lograr esto utilizando un controlador API para gestionar la descarga del archivo.

En este tutorial, te guiaré a través de los pasos necesarios para implementar la descarga de un archivo PDF generado con iText en una aplicación Blazor, utilizando un controlador API para facilitar la descarga.

Pasos para Implementar la Descarga de Archivos

  1. Generar el PDF en tu Aplicación Blazor
  2. Crear un Controlador API para la Descarga
  3. Llamar al Controlador desde Blazor
  4. Configuración de JSRuntime (opcional)

1. Generar el PDF en tu Aplicación Blazor

Si ya tienes la lógica para generar un PDF utilizando iText, el primer paso es guardar el PDF en un lugar temporal. Puedes optar por guardarlo en memoria o en el disco del servidor.

Ejemplo de generación de PDF (usando iText):

// Código de ejemplo para generar un PDF usando iText
public void GeneratePdf(string filePath)
{
    using (var document = new Document())
    {
        PdfWriter.GetInstance(document, new FileStream(filePath, FileMode.Create));
        document.Open();
        document.Add(new Paragraph("Hola, mundo!"));
        document.Close();
    }
}

Asegúrate de ajustar la ruta filePath a la ubicación donde deseas guardar el PDF generado.


2. Crear un Controlador API para la Descarga

Para gestionar la descarga del archivo, crea un controlador API en tu proyecto Blazor. Este controlador manejará la solicitud de descarga y enviará el archivo PDF al navegador del usuario.

Controlador de descarga (API Controller):

using Microsoft.AspNetCore.Mvc;
using System.IO;
using System.Threading.Tasks;

namespace YourNamespace.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class FileDownloadController : ControllerBase
    {
        [HttpGet("DownloadPDF")]
        public async Task<IActionResult> DownloadPDF()
        {
            var filePath = "path/to/your/pdf/generated-file.pdf"; // Cambia esto a la ruta de tu PDF generado
            var memory = new MemoryStream();

            using (var stream = new FileStream(filePath, FileMode.Open))
            {
                await stream.CopyToAsync(memory);
            }

            memory.Position = 0;
            return File(memory, "application/pdf", "Cotizacion.pdf"); // Aquí el nombre con el que deseas que se descargue el archivo
        }
    }
}

Este controlador expone un endpoint api/FileDownload/DownloadPDF que permite descargar el archivo PDF. La lógica carga el archivo desde la ruta especificada, lo copia a un stream de memoria y luego lo envía como respuesta HTTP con el tipo de contenido adecuado.


3. Llamar al Controlador desde Blazor

Para que los usuarios puedan descargar el archivo PDF desde tu aplicación Blazor, puedes crear un botón o enlace que haga una solicitud al controlador API para iniciar la descarga.

Ejemplo en un componente Blazor:

<button @onclick="DownloadPDF">Descargar Cotización</button>

@code {
    private async Task DownloadPDF()
    {
        var url = "/api/FileDownload/DownloadPDF";
        await JS.InvokeVoidAsync("window.open", url, "_blank"); // Abre una nueva pestaña para descargar el archivo
    }
}

Este código llama al endpoint del controlador API utilizando JavaScript para abrir una nueva pestaña en el navegador, lo que iniciará la descarga del archivo.


4. Configuración de JSRuntime (opcional)

Para usar JavaScript en Blazor, asegúrate de que IJSRuntime esté inyectado en tu componente o página.

Ejemplo de inyección de IJSRuntime:

@inject IJSRuntime JS

Esto permite que tu componente Blazor invoque métodos JavaScript para interactuar con el navegador, como abrir una nueva pestaña para la descarga.


Opción Alternativa para Blazor WebAssembly

Si estás trabajando con Blazor WebAssembly, puedes manejar la descarga directamente en el navegador sin necesidad de un controlador, siempre que el archivo esté disponible en el cliente. Puedes convertir el PDF a una cadena Base64 y crear un enlace de descarga en memoria. Sin embargo, para archivos grandes o para mantener una arquitectura más limpia, el uso de un controlador API es la opción preferida.

Ejemplo de enlace de descarga en Blazor WebAssembly:

<button @onclick="DownloadPDF">Descargar Cotización</button>

@code {
    private async Task DownloadPDF()
    {
        var pdfBase64 = "data:application/pdf;base64, [Base64 String Here]"; // Aquí iría el contenido en Base64 del PDF
        await JS.InvokeVoidAsync("window.open", pdfBase64, "_blank");
    }
}

Este enfoque es útil para archivos pequeños y para escenarios donde quieres evitar el uso de un controlador adicional.


Implementar la descarga de archivos en una aplicación Blazor puede lograrse eficazmente utilizando un controlador API para gestionar la descarga del archivo PDF generado. Este enfoque permite mantener la arquitectura de tu aplicación limpia y organizada, separando la lógica de generación de archivos de la lógica de descarga.

Siguiendo los pasos descritos en este tutorial, podrás añadir funcionalidades de descarga de archivos a tu aplicación Blazor, proporcionando una experiencia de usuario fluida y profesional.


Este tutorial te proporciona una guía clara para implementar la descarga de archivos en Blazor. Puedes adaptar el código y los conceptos a las necesidades específicas de tu proyecto.

Te puede interesar...

Deja un comentario