Syncfusion AI Assistant

How can I help you?

Getting Started with the Blazor PDF Viewer in Web App

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

NOTE

If using WebAssembly or Auto interactive render modes, 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 Web App in Visual Studio

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

Install Syncfusion® Blazor SfPdfViewer and Themes NuGet Packages in the App

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.

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 33.2.3
Install-Package Syncfusion.Blazor.Themes -Version 33.2.3

NOTE

For WebAssembly or Auto render modes, install packages in the client project. Syncfusion® uses SkiaSharp.Views.Blazor version 3.119.1, so ensure this version is referenced.

Prerequisites

NOTE

If using WebAssembly or Auto interactive render modes, 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 Web App in Visual Studio Code

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

For example, in a Blazor Web App with the Auto interactive render mode, use the following commands in the integrated terminal (Ctrl+`).

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

Install Syncfusion® 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.
  • Ensure you’re in the project root directory where your .csproj file is located.
  • Run the following command to install Syncfusion.Blazor.SfPdfViewer and Syncfusion.Blazor.Themes NuGet packages 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 restore

NOTE

Syncfusion® Blazor components are available in nuget.org. Refer to NuGet packages topic for 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, so ensure this version is referenced.

Prerequisites

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

dotnet --version

NOTE

If using WebAssembly or Auto interactive render modes, 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 Web App using .NET CLI

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

For example, in a Blazor Web App with the Auto interactive render mode, use the following commands:

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

Install Syncfusion® Blazor SfPdfViewer and Themes NuGet in the App

  • Open a command prompt, terminal, or shell.
  • Ensure you’re in the project root directory where your .csproj file is located (or the Client project if applicable).
  • 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 restore

NOTE

For WebAssembly or Auto render modes, install packages in the client project. 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 from the client project 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 the Blazor Web App.

// 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. 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 stylesheet resource

Add the stylesheet at the end of the <head> section in the Components/App.razor 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 Components/App.razor 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>

NOTE

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 Syncfusion® Blazor PDF Viewer component

Add the Syncfusion Blazor PDF Viewer (Next-Gen) component in the ~/Components/Pages/*.razor file. If the interactivity location is set to Per page/component in the Web App, define a render mode at the top of the ~/Pages/*.razor file. (For example, InteractiveServer, InteractiveWebAssembly or InteractiveAuto).

Add the Syncfusion® PDF Viewer component in ~/Pages/Home.razor.

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

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

NOTE

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.

  • 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