Syncfusion AI Assistant

How can I help you?

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

25 May 20266 minutes to read

This section briefly 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 .NET workloads for SkiaSharp: dotnet workload install wasm-tools

  • Installs the latest SDK workload (e.g., .NET 10)
  • For specific versions, use wasm-tools-net8 or wasm-tools-net9

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. Ensure this version is referenced.

Prerequisites

NOTE

For WebAssembly Application, install the required .NET workloads for SkiaSharp: dotnet workload install wasm-tools

  • Installs the latest SDK workload (e.g., .NET 10)
  • For specific versions, use wasm-tools-net8 or wasm-tools-net9

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

NOTE

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.

NOTE

Syncfusion® uses SkiaSharp.Views.Blazor version 3.119.1. 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

Register Syncfusion® Blazor Service

Register the Syncfusion® Blazor service in the ~/Program.cs file of your Blazor WebAssembly App.

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Syncfusion.Blazor;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddMemoryCache();
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

// Add Syncfusion Blazor service to the container.
builder.Services.AddSyncfusionBlazor();
await builder.Build().RunAsync();

Add stylesheet and script resources

The theme stylesheet and script can be accessed from NuGet through Static Web Assets. Include the stylesheet and script references in the wwwroot/index.html file.

<head>
    <!-- Syncfusion Blazor PDF Viewer control's theme style sheet -->
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>
<body>
    <!-- Syncfusion Blazor PDF Viewer control's scripts -->
    <script src="_content/Syncfusion.Blazor.SfPdfViewer/scripts/syncfusion-blazor-sfpdfviewer.min.js" type="text/javascript"></script>
</body>

Add Syncfusion® Blazor PDF Viewer Component

Add the Syncfusion® PDF Viewer (Next-Gen) component in ~/Pages/Home.razor.

@page "/"

<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