Konvertieren von Razor in PDF in Blazor Server mit C#

Welche Modellklassenstruktur sollte ich verwenden?

Fügen Sie eine Standard-C#-Klasse namens PersonInfo hinzu. Diese Klasse dient als Modell für die Speicherung 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; }
    }
}

Dieses Modell stellt die Datenstruktur dar, die an Ihre Razor-Komponente übergeben und in der PDF-Datei wiedergegeben wird. IronPDF funktioniert mit jedem C#-Objektmodell, von einfachen POCOs bis hin zu komplexen Entity-Framework-Modellen. Berücksichtigen Sie beim Entwurf von Modellen für die PDF-Generierung, wie die Daten im endgültigen Dokument angezeigt werden, und strukturieren Sie die Eigenschaften entsprechend.

Wie implementiere ich die Razor-Komponente für die PDF-Erzeugung?

Verwenden Sie die RenderRazorComponentToPdf-Methode, um Razor-Komponenten in PDFs zu konvertieren. Greifen Sie auf diese Methode zu, indem Sie die Klasse ChromePdfRenderer instanziieren. Die Methode gibt ein PdfDocument-Objekt zum Exportieren oder zur weiteren Bearbeitung zurück.

Das zurückgegebene PdfDocument unterstützt zusätzliche Modifikationen einschließlich der Konvertierung in die Formate PDF/A oder PDF/UA. Sie können das Dokument zusammenführen oder teilen, Seiten drehen und Anmerkungen oder Lesezeichen hinzufügen. Fügen Sie bei Bedarf eigene Wasserzeichen ein.

Fügen Sie eine Razor-Komponente namens Person.razor hinzu. 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>

Diese Methode ermöglicht den Zugriff auf alle RenderingOptions-Funktionen. Fügen Sie Text- und HTML-Kopf- und Fußzeilen hinzu, fügen Sie Seitenzahlen ein und passen Sie Seitengröße und Layout an. RenderingOptions unterstützt angepasste Ränder, Viewport-Einstellungen für responsive Designs und JavaScript-Ausführungsverzögerungen für dynamische Inhalte.

Bei komplexen Layouts oder CSS-Frameworks wie Bootstrap sollten Sie die responsive CSS-Rendering-Funktionen erkunden, um sicherzustellen, dass PDFs in verschiedenen Seitengrößen korrekt angezeigt werden.

Wie füge ich eine Navigation zu meiner Razor-Komponente hinzu?

• Navigieren Sie zum "Gemeinsamen Ordner" und öffnen Sie NavMenu.razor. Fügen Sie den Abschnitt hinzu, der unsere Razor-Komponente Person öffnen wird. Unsere Person Komponente 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>

Dieses Navigations-Setup lässt sich in das Routing-System von Blazor integrieren, so dass Benutzer über das Hauptnavigationsmenü Ihrer Anwendung auf die PDF-Erstellungsfunktionen zugreifen können. Die NavLink-Komponente sorgt für die richtige Hervorhebung der aktiven Route.

Wie sieht der Prozess der PDF-Erstellung aus?

Führen Sie das Projekt aus und erzeugen Sie ein PDF-Dokument. Klicken Sie auf die Schaltfläche "In PDF drucken". IronPDF verarbeitet Ihre Razor-Komponente, konvertiert sie in HTML und rendert sie mit seiner Chrome-basierten Rendering-Engine als PDF. Dadurch wird die gleiche visuelle Wiedergabetreue wie in modernen Webbrowsern beibehalten.

Die generierte PDF-Datei wird im Ausgabeverzeichnis Ihres Projekts gespeichert. Passen Sie den Speicherort an, implementieren Sie direkte Browser-Downloads, oder speichern Sie PDFs in einem Cloud-Speicher wie Azure Blob Storage. Für Produktionsanwendungen sollten Sie eine Fehlerbehandlung und ein Benutzerfeedback für Szenarien implementieren, in denen die PDF-Generierung fehlschlagen oder die erwartete Dauer überschreiten könnte.