Getting Started with the Blazor PDF Viewer in Web App

24 Jul 202612 minutes to read

This section explains how to include the Blazor PDF Viewer component in a Blazor Web App using Visual Studio and Visual Studio Code.

Prerequisites

Install the required .NET workloads (Blazor WebAssembly / Auto render modes)

If using WebAssembly or Auto interactive render modes, install the required workload for SkiaSharp. Run the following command in a command prompt (Windows), terminal (macOS), or shell (Linux):

dotnet workload install wasm-tools

The wasm-tools workload is installed for the active .NET SDK. When targeting a different .NET SDK version, ensure that the corresponding version-specific workload is installed.

Create a new Blazor Web App in Visual Studio

Use Visual Studio 2022 to create a Blazor Web App via Microsoft Templates or the Syncfusion® Blazor Extension. During creation, ensure the appropriate interactive render mode and interactivity location are configured.

Install Blazor SfPdfViewer and Themes NuGet Packages in the App

To add Blazor SfPdfViewer component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install Syncfusion.Blazor.SfPdfViewer and Syncfusion.Blazor.Themes.

If you utilize WebAssembly or Auto render modes in the Blazor Web App, you need to install Syncfusion® Blazor components NuGet packages within the client project.

Alternatively, you can utilize the following package manager command to achieve the same.

Install-Package Syncfusion.Blazor.SfPdfViewer -Version 34.1.29
Install-Package Syncfusion.Blazor.Themes -Version 34.1.29

NOTE

Prerequisites

Install the required .NET workloads (Blazor WebAssembly / Auto render modes)

If using WebAssembly or Auto interactive render modes, install the required workload for SkiaSharp. Run the following command in the integrated terminal (Ctrl+`):

dotnet workload install wasm-tools

The wasm-tools workload is installed for the active .NET SDK. When targeting a different .NET SDK version, ensure that the corresponding version-specific workload is installed.

Create a new Blazor Web App in Visual Studio Code

Create a Blazor Web App using Visual Studio Code via Microsoft Templates or the Syncfusion® Blazor Extension. During creation, ensure the appropriate interactive render mode and interactivity location are configured.

For example, to create a Blazor Web App with the Auto interactive render mode using the Syncfusion Blazor template, use the following commands in the integrated terminal (Ctrl+`):

dotnet new blazor -o BlazorWebApp -int Auto
cd BlazorWebApp
cd BlazorWebApp.Client

NOTE

When using the default Microsoft dotnet new blazor template, the -int Auto flag is not supported and a .Client project is not created. In that case, use dotnet new blazor --interactivity Auto -o BlazorWebApp and run all subsequent commands in the project root.

Install Blazor SfPdfViewer and Themes NuGet Packages in the App

If you utilize WebAssembly or Auto render modes in the Blazor Web App, you need to install Syncfusion® Blazor components NuGet packages within the client project.

  • Press Ctrl+` to open the integrated terminal in Visual Studio Code.
  • For WebAssembly or Auto render modes, navigate to the client project directory.
  • For the Server render mode, ensure you are in the project root directory where your .csproj file is located.
  • Run the following commands to install the Syncfusion.Blazor.SfPdfViewer and Syncfusion.Blazor.Themes NuGet packages and ensure all dependencies are installed.
dotnet add package Syncfusion.Blazor.SfPdfViewer -v 34.1.29
dotnet add package Syncfusion.Blazor.Themes -v 34.1.29
dotnet restore

NOTE

  • Syncfusion® Blazor components are available on nuget.org. Refer to the NuGet packages topic for the available NuGet packages list with component details.
  • For WebAssembly or Auto render modes, install packages in the client project.
  • Syncfusion® uses SkiaSharp.Views.Blazor version 3.119.1. Ensure your project references this version.

Prerequisites

Install the latest version of the .NET SDK. If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows), terminal (macOS), or shell (Linux):

dotnet --version

Install the required .NET workloads (Blazor WebAssembly / Auto render modes)

If using WebAssembly or Auto interactive render modes, install the required workload for SkiaSharp. Run the following command in a command prompt (Windows), terminal (macOS), or shell (Linux):

dotnet workload install wasm-tools

The wasm-tools workload is installed for the active .NET SDK. When targeting a different .NET SDK version, ensure that the corresponding version-specific workload is installed.

Create a Blazor Web App using .NET CLI

Run the following command to create a new Blazor Web App in a command prompt (Windows), terminal (macOS), or shell (Linux). For detailed instructions, refer to the Blazor Web App Getting Started documentation.

For example, to create a Blazor Web App with the Auto interactive render mode using the Syncfusion Blazor template, use the following commands:

dotnet new blazor -o BlazorWebApp -int Auto
cd BlazorWebApp
cd BlazorWebApp.Client

NOTE

When using the default Microsoft dotnet new blazor template, the -int Auto flag is not supported and a .Client project is not created. In that case, use dotnet new blazor --interactivity Auto -o BlazorWebApp and run all subsequent commands in the project root.

Install Blazor SfPdfViewer and Themes NuGet Packages in the App

  • Open a command prompt, terminal, or shell.
  • For WebAssembly or Auto render modes, navigate to the client project directory.
  • For the Server render mode, ensure you are in the project root directory where your .csproj file is located.
  • Run the following commands to install the Syncfusion.Blazor.SfPdfViewer and Syncfusion.Blazor.Themes NuGet packages and ensure all dependencies are installed.
dotnet add package Syncfusion.Blazor.SfPdfViewer -v 34.1.29
dotnet add package Syncfusion.Blazor.Themes -v 34.1.29
dotnet restore

NOTE

Add namespaces

After the package is installed, open the ~/_Imports.razor file from the client project and add the Syncfusion.Blazor and Syncfusion.Blazor.SfPdfViewer namespaces:

@using Syncfusion.Blazor
@using Syncfusion.Blazor.SfPdfViewer

Add the Syncfusion.Blazor namespace to the ~/Program.cs file:

using Syncfusion.Blazor;

Register Syncfusion® Blazor service

Register the Syncfusion® Blazor service in the ~/Program.cs file after the builder is created in the Blazor Web App. AddMemoryCache() is required by the SfPdfViewer to cache document and rendering data, and AddSignalR (Server/Auto modes) is required to allow large PDF payloads (size is in bytes; default is 32 KB).

// Configure SignalR (with increased message size) and enable memory caching
builder.Services.AddSignalR(o => { o.MaximumReceiveMessageSize = 102400000; });
builder.Services.AddMemoryCache();
// Register Syncfusion Blazor service
builder.Services.AddSyncfusionBlazor();
// Enable memory caching
builder.Services.AddMemoryCache();
// Register Syncfusion Blazor service
builder.Services.AddSyncfusionBlazor();
// Configure SignalR (with increased message size) and enable memory caching
builder.Services.AddSignalR(o => { o.MaximumReceiveMessageSize = 102400000; });
builder.Services.AddMemoryCache();
// Register Syncfusion Blazor service
builder.Services.AddSyncfusionBlazor();

NOTE

If the interactive render mode is set to WebAssembly or Auto, register the Syncfusion® Blazor service in both ~/Program.cs files of the Blazor Web App. See Processing Large Files Without Increasing Maximum Message Size in SfPdfViewer Component.

Add stylesheet and script resources

The theme stylesheet and script can be accessed from NuGet through Static Web Assets.

Add the stylesheet at the end of the <head> section in the ~/Components/App.razor file to apply proper layout and theme styling:

<!-- Blazor PDF Viewer control's theme style sheet -->
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />

Add the required script at the end of the <body> section in the ~/Components/App.razor file to enable component functionality:

<!-- Blazor PDF Viewer control's scripts -->
<script src="_content/Syncfusion.Blazor.SfPdfViewer/scripts/syncfusion-blazor-sfpdfviewer.min.js" type="text/javascript"></script>

NOTE

  • For WebAssembly or Auto render modes, the _content/ static assets are exposed by the client project. Add the <link> and <script> tags to the client project’s ~/Components/App.razor file, not the server project’s.
  • Check out the Blazor Themes topic to explore supported ways (such as static assets, CDN, and CRG) to apply themes in your Blazor application. Also, check out the Adding Script Reference topic to learn different approaches for adding script references in your Blazor application.

Add Blazor PDF Viewer component

The Blazor PDF Viewer (Next-Gen) component is added in the ~/Components/Pages/Home.razor file. If the Interactivity Location is set to Per page/component in the Web App, define a render mode directive at the top of the razor file (for example, InteractiveServer, InteractiveWebAssembly, or InteractiveAuto).

@* desired render mode defined here *@
@rendermode InteractiveServer

<SfPdfViewer2 DocumentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
              Height="100%"
              Width="100%">
</SfPdfViewer2>
  • Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor PDF Viewer will be displayed in your default web browser.

Blazor Web App SfPdfViewer rendering in browser

NOTE

  • The Height="100%" and Width="100%" values are relative to the parent container. Ensure the parent element (or the page body) has an explicit height, for example style="height:100vh", otherwise the PDF Viewer may not render.
  • The DocumentPath property accepts an absolute URL (HTTP/HTTPS), a path relative to the app’s wwwroot folder (for example, "pdf/sample.pdf"), or a base64-encoded PDF string.
  • If the Interactivity Location is set to Global with Auto or WebAssembly, the render mode is automatically configured in the App.razor file by default.
  • If the DocumentPath property is not set, the PDF Viewer renders without loading a PDF. Use the Open toolbar option to browse and open a PDF.

Next steps

  • To learn how to open, save, or manage PDF documents in the PDF Viewer component, see Open and Save PDF files.
  • To learn how to add and manage highlights, strike-through, free text, and shape annotations in the PDF Viewer component, see Annotations.
  • To learn how to read, fill, and work with AcroForm fields in the PDF Viewer component, see Form filling.
  • To learn how to add, remove, and rearrange toolbar items in the PDF Viewer component, see Toolbar customization.

You can also experiment directly using the interactive playground below for a quick demo:

NOTE

For a hands-on reference with working code examples, explore the sample projects available on GitHub. Looking for the full Blazor PDF Viewer component overview, features, pricing, and documentation? Visit the Blazor PDF Viewer page.

Video tutorial

To get started quickly with the Blazor PDF Viewer, you can watch this video:

See also