1. IronPDF
2. Anleitungen
3. Razor zu PDF (Blazor Server)

Wie man Razor in Blazor Server in PDF konvertiert

von Chaknith Bin

Eine Razor-Komponente ist ein Element der Benutzeroberfläche, z. B. eine Seite, ein Dialogfeld oder ein Dateneingabeformular, das mit C# und der Razor-Syntax erstellt wurde. Sie dient als wiederverwendbares Stück UI.

Blazor Server ist ein Web-Framework, mit dem Sie interaktive Web-UIs mit C# anstelle von JavaScript erstellen können. In diesem Rahmen läuft die Logik der Komponenten auf dem Server.

IronPDF ermöglicht es Ihnen, PDF-Dokumente aus Razor-Komponenten in einem Blazor Server-Projekt oder einer Anwendung zu erzeugen. Dies macht die Erstellung von PDF-Dateien/Seiten in Blazor Server sehr einfach.

IronPDF-Erweiterungspaket

Das Paket IronPdf.Extensions.Blazor ist eine Erweiterung des Hauptpakets IronPdf. Sowohl die IronPdf.Extensions.Blazor- als auch die IronPDF-Pakete werden benötigt, um Razor-Komponenten in einer Blazor Server App in PDF-Dokumente umzuwandeln.

PM > Install-Package IronPdf.Extensions.Blazor

Installieren mit NuGet

Installieren-Paket IronPDF.Extensions.Blazor

nuget.org/packages/IronPdf.Extensions.Blazor/

Razor-Komponenten in PDFs rendern

Um Razor-Komponenten in PDFs zu konvertieren, ist ein Blazor Server App-Projekt erforderlich.

Hinzufügen einer Modellklasse

Fügen Sie eine Standard-C#-Klasse hinzu und nennen Sie sie PersonInfo. Diese Klasse wird als Modell für die Speicherung von Personeninformationen dienen. 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

Hinzufügen einer Razor-Komponente

Verwenden Sie die Methode "RenderRazorComponentToPdf", um Razor-Komponenten in PDF-Dateien zu konvertieren. Greifen Sie auf diese Methode zu, indem Sie die Klasse ChromePdfRenderer instanziieren. Die Methode gibt ein PdfDocument-Objekt zurück, mit dem Sie das PDF-Dokument entweder exportieren oder weiter bearbeiten können.

Das zurückgegebene PdfDocument kann weiteren Modifikationen unterzogen werden, wie zum Beispiel der Konvertierung inPDF/A oderPDF/UA formate. Sie können auchzusammenführen oder Aufteilen das PDF-Dokument, drehen Sie die Seiten und fügen Sieanmerkungen oderlesezeichen. Benutzerdefinierte Wasserzeichen kann auch auf Ihr PDF gestempelt werden.

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

@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

Außerdem haben Sie mit dieser Methode zur PDF-Erstellung vollen Zugriff auf alle Funktionen in RenderingOptions. Dazu gehört die Möglichkeit, Folgendes einzufügentext, sowie HTML-Kopf- und -Fußzeilen. Außerdem können Sie Folgendes hinzufügenseitenzahlen und passen Sie die Seitenabmessungen und das Layout nach Ihren Wünschen an.

Einen Abschnitt zum linken Menü hinzufügen

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

<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

Hier erfahren Sie, wie Sie das Projekt ausführen und ein PDF-Dokument erstellen.

Blazor Server App Projekt herunterladen

Sie können den kompletten Code für diese Anleitung herunterladen. Er wird als gezippte Datei geliefert, die Sie in Visual Studio als Blazor Server App-Projekt öffnen können.

Klicken Sie hier, um das Projekt herunterzuladen.

Chaknith Bin

Software-Ingenieur

Chaknith ist der Sherlock Holmes der Entwickler. Zum ersten Mal kam ihm der Gedanke, dass er eine Zukunft in der Softwareentwicklung haben könnte, als er zum Spaß an Code Challenges teilnahm. Sein Schwerpunkt liegt auf IronXL und IronBarcode, aber er ist stolz darauf, Kunden mit jedem Produkt zu helfen. Chaknith nutzt sein Wissen aus direkten Gesprächen mit Kunden, um die Produkte selbst weiter zu verbessern. Sein anekdotisches Feedback geht über Jira-Tickets hinaus und unterstützt die Produktentwicklung, die Dokumentation und das Marketing, um das Gesamterlebnis der Kunden zu verbessern.Wenn er nicht im Büro ist, lernt er über maschinelles Lernen, programmiert und wandert.