Convertir Razor a PDF en Blazor Server con C#

¿Qué estructura de clase de modelo debo utilizar?

Añada una clase estándar de C# llamada PersonInfo. Esta clase sirve de modelo para almacenar información sobre las personas. Inserta el siguiente código:

:path=/static-assets/pdf/content-code-examples/how-to/razor-to-pdf-blazor-server-model.cs

namespace BlazorSample.Data
{
    public class PersonInfo
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Title { get; set; }
        public string Description { get; set; }
    }
}

Este modelo representa la estructura de datos pasada a su componente Razor y renderizada en el PDF. IronPDF funciona con cualquier modelo de objetos de C#, desde simples POCO hasta complejos modelos de marco de entidades. Cuando diseñe modelos para la generación de PDF, tenga en cuenta cómo se mostrarán los datos en el documento final y estructure las propiedades en consecuencia.

¿Cómo implementar el componente Razor para la generación de PDF?

Usar el método RenderRazorComponentToPdf para convertir componentes Razor en PDFs. Acceda a este método instanciando la clase ChromePdfRenderer. El método devuelve un objeto PdfDocument para su exportación o posterior modificación.

El PdfDocument devuelto admite modificaciones adicionales, incluida la conversión a los formatos PDF/A o PDF/UA. Puede fusionar o dividir el documento, rotar las páginas y añadir anotaciones o marcadores. Aplique marcas de agua personalizadas según sea necesario.

Añade un componente Razor llamado Persona.razor. Ingresa el siguiente código:

@page "/Person"
@using BlazorSample.Data;
@using IronPdf;
@using IronPdf.Extensions.Blazor;

<h3>Person</h3>

@code {
    // A parameter to receive a list of persons from the parent component.
    [Parameter]
    public IEnumerable<PersonInfo> persons { get; set; }

    // Dictionary to hold parameters that will be passed to the PDF renderer.
    public Dictionary<string, object> Parameters { get; set; } = new Dictionary<string, object>();

    protected override async Task OnInitializedAsync()
    {
        // Initialize the persons list with some sample data.
        persons = new List<PersonInfo>
        {
            new PersonInfo { Name = "Alice", Title = "Mrs.", Description = "Software Engineer" },
            new PersonInfo { Name = "Bob", Title = "Mr.", Description = "Software Engineer" },
            new PersonInfo { Name = "Charlie", Title = "Mr.", Description = "Software Engineer" }
        };
    }

    private async void PrintToPdf()
    {
        ChromePdfRenderer renderer = new ChromePdfRenderer();

        // Apply text footer to the PDF pages.
        renderer.RenderingOptions.TextFooter = new TextHeaderFooter()
        {
            LeftText = "{date} - {time}",
            DrawDividerLine = true,
            RightText = "Page {page} of {total-pages}",
            Font = IronSoftware.Drawing.FontTypes.Arial,
            FontSize = 11
        };

        Parameters.Add("persons", persons);

        // Render Razor component to PDF and save it.
        PdfDocument pdf = renderer.RenderRazorComponentToPdf<Person>(Parameters);
        File.WriteAllBytes("razorComponentToPdf.pdf", pdf.BinaryData);
    }
}

<table class="table">
    <tr>
        <th>Name</th>
        <th>Title</th>
        <th>Description</th>
    </tr>
    @foreach (var person in persons)
    {
        <tr>
            <td>@person.Name</td>
            <td>@person.Title</td>
            <td>@person.Description</td>
        </tr>
    }
</table>

<button class="btn btn-primary" @onclick="PrintToPdf">Print to Pdf</button>

Este método proporciona acceso a todas las funciones de RenderingOptions. Añada encabezados y pies de página de texto y HTML, incluya números de página y ajuste las dimensiones y el diseño de las páginas. RenderingOptions admite margenes personalizados, ajustes de ventana gráfica para diseños adaptables y retrasos en la ejecución de JavaScript para contenido dinámico.

Para diseños complejos o marcos CSS como Bootstrap, explora capacidades de renderizado CSS responsivo para garantizar que los PDF aparezcan correctamente en diferentes tamaños de página.

¿Cómo añado navegación a mi componente Razor?

• Navegue hasta la "Carpeta compartida" y abra NavMenu.razor. Añade la sección que abrirá nuestro componente Razor, Persona. Nuestro componente Persona será la segunda opción.

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="Person">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Person
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </div>
    </nav>
</div>

Esta configuración de navegación se integra con el sistema de enrutamiento de Blazor, lo que permite a los usuarios acceder a la funcionalidad de generación de PDF desde el menú de navegación principal de su aplicación. El componente NavLink garantiza el resaltado correcto de la ruta activa.

¿Cómo es el proceso de generación de PDF?

Ejecute el proyecto y genere un documento PDF. Haga clic en el botón "Imprimir en PDF". IronPDF procesa su componente Razor, lo convierte a HTML y lo renderiza como PDF utilizando su motor de renderizado basado en Chrome. Esto mantiene la misma fidelidad visual que en los navegadores web modernos.

El PDF generado se guarda en el directorio de salida del proyecto. Personaliza la ubicación de guardado, implementa descargas directas desde el navegador o almacena los PDF en la nube, como Azure Blob Storage. Para las aplicaciones de producción, implemente la gestión de errores y los comentarios de los usuarios para situaciones en las que la generación de PDF pueda fallar o superar la duración prevista.