Konwersja Razor do formatu PDF w Blazor Server za pomocą języka C# PdfDocument

Jakiej struktury klas modelowych powinienem użyć?

Dodaj standardową klasę C# o nazwie PersonInfo. Ta klasa służy jako model do przechowywania informacji o osobach. Wstaw następujący kod:

: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

Ten model przedstawia strukturę danych przekazaną do komponentu Razor i wyrenderowaną w pliku PDF. IronPDF współpracuje z dowolnym modelem obiektowym C#, od prostych POCO po złożone modele Entity Framework. Projektując modele do generowania plików PDF, należy wziąć pod uwagę sposób wyświetlania danych w docelowym dokumencie i odpowiednio dostosować właściwości struktury.

Jak zaimplementować komponent Razor do generowania plików PDF?

Użyj metody RenderRazorComponentToPdf, aby przekonwertować komponenty Razor na pliki PDF. Dostęp do tej metody uzyskuje się poprzez instancjonowanie klasy `. Metoda zwraca obiektPdfDocument` do eksportu lub dalszej modyfikacji.

Zwrócony plik PdfDocument obsługuje dodatkowe modyfikacje, w tym konwersję do formatów PDF/A lub PDF/UA. Możesz łączyć lub dzielić dokument, obracać strony oraz dodawać adnotacje lub zakładki. W razie potrzeby zastosuj niestandardowe znaki wodne.

Dodaj komponent Razor o nazwie Person.razor. Wprowadź następujący kod:

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

Ta metoda zapewnia dostęp do wszystkich funkcji RenderingOptions. Dodaj nagłówki i stopki tekstowe oraz HTML, uwzględnij numery stron oraz dostosuj wymiary i układ strony. RenderingOptions obsługuje niestandardowe marginesy, ustawienia okna wyświetlania dla projektów responsywnych oraz opóźnienia w wykonywaniu kodu JavaScript dla treści dynamicznych.

W przypadku złożonych układów lub frameworków CSS, takich jak Bootstrap, należy wykorzystać możliwości responsywnego renderowania CSS, aby zapewnić prawidłowe wyświetlanie plików PDF na stronach o różnych rozmiarach.

Jak dodać nawigację do mojego komponentu Razor?

• Przejdź do "Folderu współdzielonego" i otwórz NavMenu.razor. Dodaj sekcję, która otworzy nasz komponent Razor, Person. Naszym komponentem Person będzie druga opcja.

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

Ta konfiguracja nawigacji integruje się z systemem routingu Blazor, umożliwiając użytkownikom dostęp do funkcji generowania plików PDF z głównego menu nawigacyjnego aplikacji. Komponent NavLink zapewnia prawidłowe podświetlenie aktywnej trasy.

Jak wygląda proces generowania plików PDF?

Uruchom projekt i wygeneruj dokument PDF. Kliknij przycisk "Drukuj do pliku PDF". IronPDF przetwarza komponent Razor, konwertuje go do formatu HTML i renderuje jako plik PDF przy użyciu silnika renderującego opartego na przeglądarce Chrome. Dzięki temu zachowana jest taka sama wierność wizualna, jak w nowoczesnych przeglądarkach internetowych.

Wygenerowany plik PDF zostanie zapisany w katalogu wyjściowym projektu. Dostosuj lokalizację zapisu, wdroż bezpośrednie pobieranie z przeglądarki lub przechowuj pliki PDF w chmurze, np. w usłudze Azure Blob Storage. W przypadku aplikacji produkcyjnych należy zaimplementować obsługę błędów i mechanizm przekazywania informacji zwrotnych użytkownikom w sytuacjach, gdy generowanie pliku PDF może się nie powieść lub przekroczyć przewidywany czas trwania.