Convertir Razor en PDF dans le serveur Blazor avec C#35;

Quelle structure de classe de modèle dois-je utiliser ?

Ajoutez une classe C# standard nommée PersonInfo. Cette classe sert de modèle pour le stockage des informations relatives aux personnes. Insérez le code suivant :

: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; }
    }
}

Ce modèle représente la structure de données transmise à votre composant Razor et rendue dans le PDF. IronPDF fonctionne avec n'importe quel modèle d'objet C#, des simples POCO aux modèles complexes de cadre d'entités. Lorsque vous concevez des modèles pour la génération de PDF, tenez compte de la manière dont les données s'afficheront dans le document final et structurez les propriétés en conséquence.

Comment implémenter le composant Razor pour la génération de PDF?

Utilisez la méthode RenderRazorComponentToPdf pour convertir les composants Razor en PDFs. Accédez à cette méthode en instanciant la classe ChromePdfRenderer. La méthode renvoie un objet PdfDocument pour exportation ou modification ultérieure.

Le document IronPdf renvoyé prend en charge des modifications supplémentaires, notamment la conversion aux formats PDF/A ou PDF/UA. Vous pouvez fusionner ou scinder le document, faire pivoter les pages et ajouter des annotations ou des marques-pages. Appliquez des filigranes personnalisés si nécessaire.

Ajoutez un composant Razor nommé Person.razor. Entrez le code suivant :

@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>

Cette méthode permet d'accéder à toutes les fonctionnalités de RenderingOptions. Ajoutez des en-têtes et pieds de page textuels et HTML, incluez des numéro de page et ajustez les dimensions et la mise en page. RenderingOptions prend en charge les marges personnalisées, les paramètres de viewport pour les conceptions réactives et les délais d'exécution JavaScript pour le contenu dynamique.

Pour les mises en page complexes ou les frameworks CSS comme Bootstrap, explorez les capacités de rendu CSS responsive pour vous assurer que les PDF s'affichent correctement sur différentes tailles de page.

Comment ajouter la navigation à mon composant Razor?

• Naviguez jusqu'au "dossier partagé" et ouvrez NavMenu.razor. Ajoutez la section qui ouvrira notre composant Razor, Personne. Notre composant Personne sera la deuxième option.

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

Cette configuration de navigation s'intègre au système de routage de Blazor, permettant aux utilisateurs d'accéder à la fonctionnalité de génération de PDF depuis le menu de navigation principal de votre application. Le composant NavLink assure une mise en évidence correcte de l'itinéraire actif.

À quoi ressemble le processus de génération de PDF ?

Exécutez le projet et générez un document PDF. Cliquez sur le bouton "Imprimer au format PDF". IronPDF traite votre composant Razor, le convertit en HTML et le rend au format PDF à l'aide de son moteur de rendu basé sur Chrome. Cela permet de conserver la même fidélité visuelle que dans les navigateurs web modernes.

Le PDF généré s'enregistre dans le répertoire de sortie de votre projet. Personnalisez l'emplacement d'enregistrement, mettez en place des téléchargements directs par navigateur ou stockez les PDF dans un espace de stockage en nuage comme Azure Blob Storage. Pour les applications de production, mettez en place une gestion des erreurs et un retour d'information pour les utilisateurs dans les cas où la génération de PDF peut échouer ou dépasser la durée prévue.