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

Generating a PDF file from Blazor Server app
Screenshot of submitted web form and created PDF document
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";
    }
}

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

Generating a PDF file from Blazor WebAssembly app
Screenshot of submitted web form and created PDF document
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";
    }
}

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.0" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.0" PrivateAssets="all" />
  </ItemGroup>

  <!-- Add HarfBuzzSharp and SkiaSharp native assets. -->
  <ItemGroup>
    <PackageReference Include="HarfBuzzSharp.NativeAssets.WebAssembly" Version="7.3.0" />
    <NativeFileReference Include="$(HarfBuzzSharpStaticLibraryPath)\3.1.34\**\*.a" />
    <PackageReference Include="SkiaSharp.NativeAssets.WebAssembly" Version="2.88.6" />
    <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).

See also

Create PDF from ASP.NET Core application

Create PDF from ASP.NET Core application

Create PDF file on Azure from .NET Core application

Create PDF file on Azure from .NET Core application

Create PDF on Docker container from .NET Core

Create PDF on Docker container from .NET Core

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