IronPDF Blazor Server Tutorial: Render HTML to PDF in C#

How Do I Create a New Blazor Server Project?

Create a new project and select the type Blazor Server App. Visual Studio provides a template for building server-side Blazor applications that can use .NET for PDF generation. The Blazor Server hosting model executes your application logic on the server, making it suitable for PDF generation scenarios that require server-side processing.

How Do I Install IronPDF into My Blazor Project?

After creating the project, follow these steps to install the IronPDF library from NuGet within Visual Studio. IronPDF provides an API for creating PDFs from HTML strings, URLs, and existing PDF documents.

1. In the Solution Explorer window in Visual Studio, right-click References and choose Manage NuGet Packages.
2. Select Browse and search for IronPdf.
3. Select the latest version of the package, check the checkbox for your project, and click install.

Alternatively, you can use the .NET CLI to install it:

Install-Package IronPdf

For projects targeting specific platforms, you might need platform-specific packages. For example, if deploying to Linux, review the Linux installation guide.

How Do I Add a New Razor Component for PDF Generation?

Once IronPDF is installed in your Blazor project, add a new Razor Component. For this tutorial, name it "IronPdfComponent". This component will handle user input and generate PDFs dynamically based on HTML content. The component architecture in Blazor makes it easy to create reusable PDF generation functionality that can be shared across your application.

After that, update the code as follows:

@page "/IronPdf"
@inject IJSRuntime JS

<h3>IronPdfComponent</h3>

<EditForm Model="@_InputMsgModel" id="inputText">
  <div>
    <InputTextArea @bind-Value="@_InputMsgModel.HTML" rows="20" />
  </div>
  <div>
    <button type="button" @onclick="@SubmitHTML">Render HTML</button>
  </div>
</EditForm>

@page "/IronPdf"
@inject IJSRuntime JS

<h3>IronPdfComponent</h3>

<EditForm Model="@_InputMsgModel" id="inputText">
  <div>
    <InputTextArea @bind-Value="@_InputMsgModel.HTML" rows="20" />
  </div>
  <div>
    <button type="button" @onclick="@SubmitHTML">Render HTML</button>
  </div>
</EditForm>

@code {

    // Model to bind user input
    private InputHTMLModel _InputMsgModel = new InputHTMLModel();

    private async Task SubmitHTML()
    {
        // Set your IronPDF license key
        IronPdf.License.LicenseKey = "IRONPDF-MYLICENSE-KEY-1EF01";

        // Create a renderer to convert HTML to PDF
        var render = new IronPdf.ChromePdfRenderer();

        // Configure rendering options for better output
        render.RenderingOptions.PaperSize = IronPdf.Rendering.PdfPaperSize.A4;
        render.RenderingOptions.MarginTop = 40;
        render.RenderingOptions.MarginBottom = 40;

        // Render the HTML input into a PDF document
        var doc = render.RenderHtmlAsPdf(_InputMsgModel.HTML);

        var fileName = "iron.pdf";

        // Create a stream reference for the PDF content
        using var streamRef = new DotNetStreamReference(stream: doc.Stream);

        // Invoke JavaScript function to download the PDF in the browser
        await JS.InvokeVoidAsync("SubmitHTML", fileName, streamRef);
    }

    public class InputHTMLModel
    {
        public string HTML { get; set; } = @"<h1>Welcome to IronPDF</h1>
            <p>This is a sample PDF generated from HTML content in Blazor Server.</p>
            <ul>
                <li>Easy to use API</li>
                <li>High-quality rendering</li>
                <li>Full HTML5 and CSS3 support</li>
            </ul>";
    }
}

@code {

    // Model to bind user input
    private InputHTMLModel _InputMsgModel = new InputHTMLModel();

    private async Task SubmitHTML()
    {
        // Set your IronPDF license key
        IronPdf.License.LicenseKey = "IRONPDF-MYLICENSE-KEY-1EF01";

        // Create a renderer to convert HTML to PDF
        var render = new IronPdf.ChromePdfRenderer();

        // Configure rendering options for better output
        render.RenderingOptions.PaperSize = IronPdf.Rendering.PdfPaperSize.A4;
        render.RenderingOptions.MarginTop = 40;
        render.RenderingOptions.MarginBottom = 40;

        // Render the HTML input into a PDF document
        var doc = render.RenderHtmlAsPdf(_InputMsgModel.HTML);

        var fileName = "iron.pdf";

        // Create a stream reference for the PDF content
        using var streamRef = new DotNetStreamReference(stream: doc.Stream);

        // Invoke JavaScript function to download the PDF in the browser
        await JS.InvokeVoidAsync("SubmitHTML", fileName, streamRef);
    }

    public class InputHTMLModel
    {
        public string HTML { get; set; } = @"<h1>Welcome to IronPDF</h1>
            <p>This is a sample PDF generated from HTML content in Blazor Server.</p>
            <ul>
                <li>Easy to use API</li>
                <li>High-quality rendering</li>
                <li>Full HTML5 and CSS3 support</li>
            </ul>";
    }
}

This component uses the ChromePdfRenderer class for PDF generation. You can customize the rendering with various options like custom paper sizes, margins, and headers/footers.

Add this JavaScript code to _layout.cshtml to allow downloading of the PDF rendered by IronPDF in the Blazor Application:

<script>
    // JavaScript function to download PDFs generated by IronPdf
    window.SubmitHTML = async (fileName, contentStreamReference) => {
        // Get the PDF content as an ArrayBuffer
        const arrayBuffer = await contentStreamReference.arrayBuffer();

        // Create a Blob from the ArrayBuffer
        const blob = new Blob([arrayBuffer]);

        // Create an object URL for the Blob
        const url = URL.createObjectURL(blob);

        // Create an anchor element to initiate the download
        const anchorElement = document.createElement("a");
        anchorElement.href = url;
        anchorElement.download = fileName ?? "download.pdf";

        // Programmatically click the anchor to start the download
        anchorElement.click();

        // Clean up by removing the anchor and revoking the object URL
        anchorElement.remove();
        URL.revokeObjectURL(url);
    };
</script>

<script>
    // JavaScript function to download PDFs generated by IronPdf
    window.SubmitHTML = async (fileName, contentStreamReference) => {
        // Get the PDF content as an ArrayBuffer
        const arrayBuffer = await contentStreamReference.arrayBuffer();

        // Create a Blob from the ArrayBuffer
        const blob = new Blob([arrayBuffer]);

        // Create an object URL for the Blob
        const url = URL.createObjectURL(blob);

        // Create an anchor element to initiate the download
        const anchorElement = document.createElement("a");
        anchorElement.href = url;
        anchorElement.download = fileName ?? "download.pdf";

        // Programmatically click the anchor to start the download
        anchorElement.click();

        // Clean up by removing the anchor and revoking the object URL
        anchorElement.remove();
        URL.revokeObjectURL(url);
    };
</script>

Edit the NavMenu.razor file in the Shared folder to include a navigation tab to our new Razor component. Add the following code:

<div class="nav-item px-3">
    <NavLink class="nav-link" href="IronPdf">
        <span class="oi oi-list-rich" aria-hidden="true"></span> IronPdf
    </NavLink>
</div>

<div class="nav-item px-3">
    <NavLink class="nav-link" href="IronPdf">
        <span class="oi oi-list-rich" aria-hidden="true"></span> IronPdf
    </NavLink>
</div>

Once this has all been applied, you can run your solution and you should see this:

services.AddServerSideBlazor()
    .AddHubOptions(options =>
    {
        options.MaximumReceiveMessageSize = 10 * 1024 * 1024; // 10MB
        options.ClientTimeoutInterval = TimeSpan.FromSeconds(60);
    });

services.AddServerSideBlazor()
    .AddHubOptions(options =>
    {
        options.MaximumReceiveMessageSize = 10 * 1024 * 1024; // 10MB
        options.ClientTimeoutInterval = TimeSpan.FromSeconds(60);
    });