How to Convert Razor to PDF in Blazor Server

Fügen Sie eine Modellklasse hinzu

Fügen Sie eine standardmäßige C#-Klasse hinzu und benennen Sie sie PersonInfo. Diese Klasse dient als Modell zum Speichern von Personeninformationen. Fügen Sie den folgenden Code ein:

: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

Fügen Sie eine Razor-Komponente hinzu

Verwenden Sie die RenderRazorComponentToPdf-Methode, um Razor-Komponenten in PDFs zu konvertieren. Greifen Sie auf diese Methode zu, indem Sie die ChromePdfRenderer-Klasse instanziieren. Die Methode gibt ein PdfDocument-Objekt zurück, das es Ihnen ermöglicht, das PDF-Dokument entweder zu exportieren oder weiter zu bearbeiten.

The returned PdfDocument can undergo additional modifications, such as conversion to PDF/A or PDF/UA formats. You can also merge or split the PDF document, rotate its pages, and add annotations or bookmarks. Benutzerdefinierte Wasserzeichen können ebenfalls auf Ihr PDF gestempelt werden.

Fügen Sie eine Razor-Komponente hinzu und benennen Sie sie Person.razor. Geben Sie den folgenden Code ein:

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

Darüber hinaus gewährt Ihnen die Verwendung dieser Methode zur Erstellung eines PDFs vollständigen Zugriff auf alle Funktionen in RenderingOptions. Dies umfasst die Möglichkeit, Text sowie HTML-Header und -Footer einzufügen. Außerdem können Sie Seitenzahlen hinzufügen und die Seitengröße und -layout nach Belieben anpassen.

Fügen Sie einen Abschnitt zum linken Menü hinzu

• Navigieren Sie zum "Shared folder" und öffnen Sie NavMenu.razor.
• Fügen Sie den Abschnitt hinzu, der unsere Razor-Komponente, Person, öffnet. Unsere Personenkomponente wird die zweite Option sein.

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

Das Projekt ausführen

Dies zeigt Ihnen, wie Sie das Projekt ausführen und ein PDF-Dokument erstellen.