Convert Razor to PDF in Blazor Server with C#

What Model Class Structure Should I Use?

Add a standard C# class named PersonInfo. This class serves as the model for storing person information. Insert the following code:

: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; }
    }
}

This model represents the data structure passed to your Razor component and rendered in the PDF. IronPDF works with any C# object model, from simple POCOs to complex entity framework models. When designing models for PDF generation, consider how data will display in the final document and structure properties accordingly.

How Do I Implement the Razor Component for PDF Generation?

Use the RenderRazorComponentToPdf method to convert Razor components into PDFs. Access this method by instantiating the ChromePdfRenderer class. The method returns a PdfDocument object for exporting or further modification.

The returned PdfDocument supports additional modifications including conversion to PDF/A or PDF/UA formats. You can merge or split the document, rotate pages, and add annotations or bookmarks. Apply custom watermarks as needed.

Add a Razor component named Person.razor. Input the following code:

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

This method provides access to all RenderingOptions features. Add text and HTML headers and footers, include page numbers, and adjust page dimensions and layout. RenderingOptions supports custom margins, viewport settings for responsive designs, and JavaScript execution delays for dynamic content.

For complex layouts or CSS frameworks like Bootstrap, explore responsive CSS rendering capabilities to ensure PDFs appear correctly across different page sizes.

How Do I Add Navigation to My Razor Component?

• Navigate to the "Shared folder" and open NavMenu.razor. Add the section that will open our Razor component, Person. Our Person component will be the second 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>

This navigation setup integrates with Blazor's routing system, allowing users to access PDF generation functionality from your application's main navigation menu. The NavLink component ensures proper highlighting of the active route.

What Does the PDF Generation Process Look Like?

Run the project and generate a PDF document. Click the "Print to PDF" button. IronPDF processes your Razor component, converts it to HTML, and renders it as a PDF using its Chrome-based rendering engine. This maintains the same visual fidelity as in modern web browsers.

The generated PDF saves in your project's output directory. Customize the save location, implement direct browser downloads, or store PDFs in cloud storage like Azure Blob Storage. For production applications, implement error handling and user feedback for scenarios where PDF generation might fail or exceed expected duration.