Comment convertir Razor en PDF dans Blazor Server ?

This article was translated from English: Does it need improvement?
Translated
View the article in English

par Chaknith Bin

Un composant Razor est un élément d'interface utilisateur, tel qu'une page, une boîte de dialogue ou un formulaire de saisie de données, construit à l'aide de C# et de la syntaxe Razor. Il s'agit d'un élément réutilisable de l'interface utilisateur.

Blazor Server est un cadre web qui vous permet de créer des interfaces utilisateur interactives en utilisant C# au lieu de JavaScript. Dans ce cadre, la logique des composants s'exécute sur le serveur.

IronPDF vous permet de générer des documents PDF à partir de composants Razor dans un projet ou une application Blazor Server. Cela rend la création de fichiers/pages PDF simple dans Blazor Server.

Paquet d'extension IronPDF

Le paquet IronPdf.Extensions.Blazor est une extension du paquet principal IronPdf. Les paquets IronPdf.Extensions.Blazor et IronPDF sont tous deux nécessaires pour rendre les composants Razor en documents PDF dans une application du serveur Blazor.

PM > Install-Package IronPdf.Extensions.Blazor
Bibliothèque NuGet C# pour PDF

Installer avec NuGet

Installer-Package IronPdf.Extensions.Blazor

Rendre les composants Razor en PDF

Un projet Blazor Server App est nécessaire pour convertir les composants Razor en PDF.

Ajouter une classe de modèle

Ajoutez une classe C# standard et nommez-la PersonInfo. Cette classe servira de modèle pour le stockage des informations relatives aux personnes. Insérer 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; }
    }
}
Namespace BlazorSample.Data
	Public Class PersonInfo
		Public Property Id() As Integer
		Public Property Name() As String
		Public Property Title() As String
		Public Property Description() As String
	End Class
End Namespace
VB   C#

Ajouter un composant Razor

Utilisez la méthode RenderRazorComponentToPdf pour convertir les composants Razor en PDF. Accédez à cette méthode en instanciant la classe ChromePdfRenderer. La méthode renvoie un objet PdfDocument, qui vous permet d'exporter le document PDF ou de le modifier.

Le document Pdf retourné peut subir des modifications supplémentaires, telles que la conversion en PDF/A ou PDF/UA formats. Vous pouvez également fusionner ou scinder le document PDF, de faire pivoter ses pages et d'ajouter des annotations ou signets. Filigranes personnalisés peut également être apposée sur votre PDF.

Ajoutez un composant Razor et nommez-le Personne. Saisissez le code suivant :

@page "/Person"
@using BlazorSample.Data;
@using IronPdf;
@using IronPdf.Extensions.Blazor;
<h3>Person</h3>
@code {
    [Parameter]
    public IEnumerable<PersonInfo> persons { get; set; }
    public Dictionary<string, object> Parameters { get; set; } = new Dictionary<string, object>();
    protected override async Task OnInitializedAsync()
    {
        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
        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
        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>
@page "/Person"
@using BlazorSample.Data;
@using IronPdf;
@using IronPdf.Extensions.Blazor;
<h3>Person</h3>
@code {
    [Parameter]
    public IEnumerable<PersonInfo> persons { get; set; }
    public Dictionary<string, object> Parameters { get; set; } = new Dictionary<string, object>();
    protected override async Task OnInitializedAsync()
    {
        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
        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
        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>
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

De plus, l'utilisation de cette méthode pour générer un PDF vous donne un accès complet à toutes les fonctionnalités de RenderingOptions. Il s'agit notamment de la possibilité d'insérer ainsi que les en-têtes et pieds de page HTML. En outre, vous pouvez ajouter numéros de page et ajuster les dimensions de la page et la mise en page à votre convenance.

Ajouter une section au menu de gauche

  • Naviguez jusqu'au "dossier partagé" et ouvrez NavMenu.razor.
  • Ajoutez la section qui ouvrira notre composant Razor, Person. Notre composante "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>
<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>
HTML

Exécuter le projet

Elle vous montrera comment exécuter le projet et générer un document PDF.

Exécuter le projet Blazor Server

Télécharger le projet d'application Blazor Server

Vous pouvez télécharger le code complet de ce guide. Il s'agit d'un fichier zippé que vous pouvez ouvrir dans Visual Studio en tant que projet Blazor Server App.

Cliquez ici pour télécharger le projet.

Chaknith Bin

Ingénieur logiciel

Chaknith est le Sherlock Holmes des développeurs. C'est en s'amusant à relever des défis de code qu'il s'est rendu compte pour la première fois qu'il pourrait avoir un avenir dans le domaine de l'ingénierie logicielle. Il se concentre sur IronXL et IronBarcode, mais il est fier d'aider les clients avec chaque produit. Chaknith tire parti des connaissances qu'il a acquises en discutant directement avec les clients pour améliorer les produits eux-mêmes. Ses commentaires anecdotiques vont au-delà des tickets Jira et soutiennent le développement de produits, la documentation et le marketing, afin d'améliorer l'expérience globale des clients.Quand il n'est pas au bureau, on peut le trouver en train d'apprendre sur l'apprentissage automatique, le codage et la randonnée.