Getting Started with the PDF Viewer in Blazor WebAssembly (WASM) app

17 Jul 20268 minutes to read

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

Prerequisites

Install the required .NET workloads

If using WebAssembly Application, 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 App in Visual Studio

You can create a Blazor WebAssembly App using Visual Studio via Microsoft Templates or the Syncfusion® Blazor Extension.

Install Blazor SfPdfViewer and Themes NuGet Packages

To add the Blazor SfPdfViewer (Next-Gen) 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, Syncfusion.Blazor.Themes, and SkiaSharp.Views.Blazor (version 3.119.1).

Alternatively, you can use the following package manager command.

Install-Package Syncfusion.Blazor.SfPdfViewer -Version 34.2.2
Install-Package Syncfusion.Blazor.Themes -Version 34.2.2
Install-Package SkiaSharp.Views.Blazor -Version 3.119.1

NOTE

Prerequisites

Install the required .NET workloads

If using WebAssembly Application, 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 App in Visual Studio Code

Create a Blazor WebAssembly App using Visual Studio Code via Microsoft Templates or the Syncfusion® Blazor Extension.

Alternatively, create a WebAssembly application from the integrated terminal (open with Ctrl+`).

dotnet new blazorwasm -o BlazorApp
cd BlazorApp

Install Blazor SfPdfViewer and Themes NuGet Packages

Press Ctrl+` to open the integrated terminal in Visual Studio Code.

dotnet add package Syncfusion.Blazor.SfPdfViewer -v 34.2.2
dotnet add package Syncfusion.Blazor.Themes -v 34.2.2
dotnet add package SkiaSharp.Views.Blazor -v 3.119.1
dotnet restore

NOTE

Prerequisites

Install the latest version of .NET SDK. If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux).

dotnet --version

Install the required .NET workloads

If using WebAssembly Application, 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 WebAssembly App using .NET CLI

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

dotnet new blazorwasm -o BlazorApp
cd BlazorApp

Install Blazor SfPdfViewer and Themes NuGet in the App

After creating the Blazor WebAssembly App, install the required Syncfusion NuGet packages using the .NET CLI.

dotnet add package Syncfusion.Blazor.SfPdfViewer -v 34.2.2
dotnet add package Syncfusion.Blazor.Themes -v 34.2.2
dotnet add package SkiaSharp.Views.Blazor -v 3.119.1
dotnet restore

NOTE

Syncfusion® uses SkiaSharp.Views.Blazor version 3.119.1. Ensure this exact version to avoid runtime issues.

Add import namespaces

After the package is installed, open the ~/_Imports.razor file and import 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 your Blazor WebAssembly App.

// Enable memory caching
builder.Services.AddMemoryCache();
// Register Syncfusion Blazor service
builder.Services.AddSyncfusionBlazor();

Add stylesheet and script resources

The theme stylesheet and script are exposed from NuGet through Static Web Assets. The paths below assume a Blazor WebAssembly Standalone project; for hosted or Blazor Web App projects, the same _content/... paths apply in the host wwwroot/index.html.

Add the stylesheet at the end of the <head> section in the wwwroot/index.html 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 wwwroot/index.html 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>

Add Blazor PDF Viewer Component

Add the Blazor PDF Viewer (Next-Gen) component to ~/Pages/Home.razor.

<SfPdfViewer2 DocumentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
              Height="100%"
              Width="100%">
</SfPdfViewer2>

NOTE

If the DocumentPath property is not set, the PDF Viewer displays an empty viewer without a document. Use the Open toolbar option to browse and open a PDF.

Run the application

  • Press F5 or Ctrl+F5 (Windows) or ⌘+F5 (macOS) in the IDE to launch the application. From the CLI, run dotnet run from the project folder. The Blazor PDF Viewer will render in your default web browser.

Blazor Web App SfPdfViewer rendering in browser

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 on GitHub.
  • For an overview, features, pricing, and full documentation, visit the Blazor PDF Viewer page.

See also