Syncfusion AI Assistant

How can I help you?

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

19 Jun 20267 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

NOTE

For WebAssembly Application, install the required workload for SkiaSharp:

dotnet workload install wasm-tools

For specific .NET versions, use:

  • wasm-tools-net8 for .NET 8
  • wasm-tools-net9 for .NET 9

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 Syncfusion® Blazor SfPdfViewer and Themes NuGet Packages

To add Syncfusion 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.

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

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

NOTE

Syncfusion® Blazor components are available in nuget.org. Refer to NuGet packages topic for available NuGet packages list with component details. Syncfusion® uses SkiaSharp.Views.Blazor version 3.119.1, so ensure this version is referenced.

Prerequisites

NOTE

For WebAssembly Application, install the required workload for SkiaSharp:

dotnet workload install wasm-tools

For specific .NET versions, use:

  • wasm-tools-net8 for .NET 8
  • wasm-tools-net9 for .NET 9

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 using the following command in the terminal (Ctrl+`).

dotnet new blazorwasm -o BlazorApp
cd BlazorApp

Install Syncfusion® Blazor SfPdfViewer and Themes NuGet Packages

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

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

NOTE

Syncfusion® Blazor components are available in nuget.org. Refer to NuGet packages topic for available NuGet packages list with component details. Syncfusion® uses SkiaSharp.Views.Blazor version 3.119.1, so ensure this version is referenced.

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

NOTE

For WebAssembly Application, install the required workload for SkiaSharp:

dotnet workload install wasm-tools

For specific .NET versions, use:

  • wasm-tools-net8 for .NET 8
  • wasm-tools-net9 for .NET 9

Create a Blazor WebAssembly App using .NET CLI

Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or 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 Syncfusion® Blazor Spreadsheet and Themes NuGet in the App

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

  • Open a command prompt, terminal, or shell.
  • Ensure you’re in the project root directory where your .csproj file is located.
  • Run the following command to install a Syncfusion.Blazor.SfPdfViewer and Syncfusion.Blazor.Themes NuGet package and ensure all dependencies are installed.
dotnet add package Syncfusion.Blazor.SfPdfViewer -v 33.2.3
dotnet add package Syncfusion.Blazor.Themes -v 33.2.3
dotnet add package SkiaSharp.Views.Blazor -v 3.119.1
dotnet restore

NOTE

Syncfusion® uses SkiaSharp.Views.Blazor version 3.119.1, so ensure this version is referenced.

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 can be accessed from NuGet through Static Web Assets.

Add stylesheet resource

Add the stylesheet at the end of the <head> section in the wwwroot/index.html file to apply proper layout and theme styling.

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

Add script resource

Add the required script at the end of the <body> section in the wwwroot/index.html file to enable component functionality.

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

Add Syncfusion® Blazor PDF Viewer Component

Add the Syncfusion® PDF Viewer (Next-Gen) component in ~/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 renders without loading a PDF. Use the Open toolbar option to browse and open a PDF.

  • Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion Blazor PDF Viewer in your default web browser.

Blazor Web App SfPdfViewer rendering in browser

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

NOTE

To learn how to open, view, or interact with PDF files in the PDF Viewer component, see Open and Save. For a hands-on reference with working code examples, explore the sample projects available on GitHub.

See also