Create PDF files in Blazor

With GemBox.Pdf you can build Blazor applications that read, write, edit, process, and convert PDF files. The following live demos show how you can create Blazor apps that generate PDF files and download them to your browser.

Create PDF files in a Blazor Server App

The following example shows how you can create a Blazor Server application that generates a PDF file from web forms data and downloads it with a downloadFileFromStream JS function (see ASP.NET Core Blazor file downloads).

Demo
CSHTML
C#

View on GitHub

@page "/"
@inject IJSRuntime JS
@using BlazorServerApp.Data
@using System.IO
@using GemBox.Pdf
@using GemBox.Pdf.Content

<h1>Card generator [Blazor Server App]</h1>

<EditForm Model="model" OnSubmit="CreatePdf">
    <div class="form-group">Header text: <InputTextArea @bind-Value="model.Header" class="form-control"></InputTextArea></div>
    <div class="form-group">Body text: <InputTextArea @bind-Value="model.Body" class="form-control" rows="8"></InputTextArea></div>
    <div class="form-group">Footer text: <InputTextArea @bind-Value="model.Footer" class="form-control"></InputTextArea></div>
    <div class="form-group"><button class="btn btn-primary mt-2" type="submit">Create</button></div>
</EditForm>

@code {
    private FileModel model = new();

    private async Task CreatePdf()
    {
        ComponentInfo.SetLicense("FREE-LIMITED-KEY");

        // Create new document.
        using var document = new PdfDocument();

        // Add page.
        var page = document.Pages.Add();

        using var formattedText = new PdfFormattedText();

        // Write header.
        formattedText.TextAlignment = PdfTextAlignment.Center;
        formattedText.FontSize = 18;
        formattedText.MaxTextWidth = 400;
        formattedText.Append(this.model.Header);
        page.Content.DrawText(formattedText, new PdfPoint(90, 750));

        // Write body.
        formattedText.Clear();
        formattedText.TextAlignment = PdfTextAlignment.Justify;
        formattedText.FontSize = 14;
        formattedText.Append(this.model.Body);
        page.Content.DrawText(formattedText, new PdfPoint(90, 400));

        // Write footer.
        formattedText.Clear();
        formattedText.TextAlignment = PdfTextAlignment.Right;
        formattedText.FontSize = 10;
        formattedText.MaxTextWidth = 100;
        formattedText.Append(this.model.Footer);
        page.Content.DrawText(formattedText, new PdfPoint(450, 40));

        // Save PDF file.
        var stream = new MemoryStream();
        document.Save(stream);
        stream.Position = 0;

        // Download file.
        using var streamRef = new DotNetStreamReference(stream);
        await JS.InvokeVoidAsync("downloadFileFromStream", "BlazorServerOutput.pdf", streamRef);
    }
}

using System.Linq;

namespace BlazorServerApp.Data
{
    public class FileModel
    {
        public string Header { get; set; } = "Header text from Blazor Server App";
        public string Body { get; set; } = string.Join(" ", Enumerable.Repeat("Lorem ipsum dolor sit amet, consectetuer adipiscing elit.", 4));
        public string Footer { get; set; } = "Page 1 of 1";
    }
}

Generating a PDF file from Blazor Server app — Screenshot of submitted web form and created PDF document

Note that saving to XPS and image formats (like PNG and JPG) currently works only on Blazor Server applications that are hosted on Windows Server. To export an XPS or image file, you need to use a Windows-specific TFM in the project file. Besides the .NET Core Runtime, you also need a .NET Windows Desktop Runtime installed on the server.

Create PDF files in a Blazor WebAssembly App

The following example shows how you can create a Blazor WebAssembly application that generates a PDF file from web forms data and downloads it with a downloadFileFromStream JS function (see ASP.NET Core Blazor file downloads).

Demo
CSHTML
C#

View on GitHub

@page "/"
@inject IJSRuntime JS
@using BlazorWebAssemblyApp.Data
@using System.IO
@using GemBox.Pdf
@using GemBox.Pdf.Content

<h1>Card generator [Blazor WebAssembly App]</h1>

<EditForm Model="model" OnSubmit="CreatePdf">
    <div class="form-group">Header text: <InputTextArea @bind-Value="model.Header" class="form-control"></InputTextArea></div>
    <div class="form-group">Body text: <InputTextArea @bind-Value="model.Body" class="form-control" rows="8"></InputTextArea></div>
    <div class="form-group">Footer text: <InputTextArea @bind-Value="model.Footer" class="form-control"></InputTextArea></div>
    <div class="form-group"><button class="btn btn-primary mt-2" type="submit">Create</button></div>
</EditForm>

@code {
    private FileModel model = new();

    private async Task CreatePdf()
    {
        ComponentInfo.SetLicense("FREE-LIMITED-KEY");

        // Create new document.
        using var document = new PdfDocument();

        // Add page.
        var page = document.Pages.Add();

        using var formattedText = new PdfFormattedText();

        // Write header.
        formattedText.TextAlignment = PdfTextAlignment.Center;
        formattedText.FontSize = 18;
        formattedText.MaxTextWidth = 400;
        formattedText.Append(this.model.Header);
        page.Content.DrawText(formattedText, new PdfPoint(90, 750));

        // Write body.
        formattedText.Clear();
        formattedText.TextAlignment = PdfTextAlignment.Justify;
        formattedText.FontSize = 14;
        formattedText.Append(this.model.Body);
        page.Content.DrawText(formattedText, new PdfPoint(90, 400));

        // Write footer.
        formattedText.Clear();
        formattedText.TextAlignment = PdfTextAlignment.Right;
        formattedText.FontSize = 10;
        formattedText.MaxTextWidth = 100;
        formattedText.Append(this.model.Footer);
        page.Content.DrawText(formattedText, new PdfPoint(450, 40));

        // Save PDF file.
        var stream = new MemoryStream();
        document.Save(stream);
        stream.Position = 0;

        // Download file.
        using var streamRef = new DotNetStreamReference(stream);
        await JS.InvokeVoidAsync("downloadFileFromStream", "BlazorWebAssemblyOutput.pdf", streamRef);
    }
}

using System.Linq;

namespace BlazorWebAssemblyApp.Data
{
    public class FileModel
    {
        public string Header { get; set; } = "Header text from Blazor WebAssembly App";
        public string Body { get; set; } = string.Join(" ", Enumerable.Repeat("Lorem ipsum dolor sit amet, consectetuer adipiscing elit.", 4));
        public string Footer { get; set; } = "Page 1 of 1";
    }
}

Generating a PDF file from Blazor WebAssembly app — Screenshot of submitted web form and created PDF document

Besides installing GemBox.Pdf, for Blazor WebAssembly you'll also need to include its native dependencies.

View on GitHub

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

  <PropertyGroup>
    <TargetFramework>net8.0</TargetFramework>
    <Nullable>enable</Nullable>
    <WasmBuildNative>true</WasmBuildNative>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="GemBox.Pdf" Version="*" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.10" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.10" PrivateAssets="all" />
  </ItemGroup>

  <!-- Add HarfBuzzSharp and SkiaSharp native assets. -->
  <ItemGroup>
    <PackageReference Include="HarfBuzzSharp.NativeAssets.WebAssembly" Version="7.3.0.2" />
    <NativeFileReference Include="$(HarfBuzzSharpStaticLibraryPath)\3.1.34\**\*.a" />
    <PackageReference Include="SkiaSharp.NativeAssets.WebAssembly" Version="2.88.8" />
    <NativeFileReference Include="$(SkiaSharpStaticLibraryPath)\3.1.34\**\*.a" />
  </ItemGroup>

</Project>

Host and deploy Blazor

GemBox.Pdf follows a licensing model per individual developer, which includes royalty-free deployment. You are allowed to build an unlimited number of applications and deploy or distribute them across numerous services, servers, or end-user machines without any additional cost. For more information, read our End User License Agreement (EULA).

Next steps

GemBox.Pdf is a .NET component that enables developers to read, merge and split PDF files or execute low-level object manipulations from .NET applications in a simple and efficient way.

Download Buy

Create PDF files in Blazor

Create PDF files in a Blazor Server App

Create PDF files in a Blazor WebAssembly App

Host and deploy Blazor

See also

Next steps