Syncfusion AI Assistant

How can I help you?

View PDF files using the PDF Viewer in a Blazor Web App

24 Apr 20269 minutes to read

This article shows how to add the Syncfusion® Blazor PDF Viewer to a Blazor Web App using Visual Studio or Visual Studio Code.

Prerequisites

NOTE

If using an interactive render mode such as WebAssembly or Auto, ensure the required .NET workloads are installed for SkiaSharp usage in a Blazor Web App. Run the following command:

  • dotnet workload install wasm-tools
  • The above code will only install the latest available workload on the machine, such as .NET 10. If you need to install a specific .NET version like .NET 9 or .NET 8, please use a command such as dotnet workload install wasm-tools-net8 and dotnet workload install wasm-tools-net9.

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.

NOTE

Configure the appropriate interactive render mode and interactivity location when creating a Blazor Web App.

Install Syncfusion® Blazor SfPdfViewer and Themes NuGet packages

To add the Blazor PDF Viewer component, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), or the integrated terminal in Visual Studio Code (dotnet add package).

Alternatively, run the following command in the Package Manager Console to achieve the same.

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

If using the WebAssembly or Auto interactive render mode, install the NuGet packages in the client project to add the component to the Web App.

NOTE

Syncfusion® uses SkiaSharp.Views.Blazor version 3.119.1. Ensure this version is referenced.

SkiaSharp Views Blazor

Prerequisites

NOTE

If using an interactive render mode such as WebAssembly or Auto, ensure the required .NET workloads are installed for SkiaSharp usage in a Blazor Web App. Run the following command:

  • dotnet workload install wasm-tools
  • The above code will only install the latest available workload on the machine, such as .NET 10. If you need to install a specific .NET version like .NET 9 or .NET 8, please use a command such as dotnet workload install wasm-tools-net8 and dotnet workload install wasm-tools-net9.

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.

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

NOTE

Configure the appropriate interactive render mode and interactivity location when creating a Blazor Web App.

Install Syncfusion® Blazor SfPdfViewer and Themes NuGet packages

To add the Blazor PDF Viewer component, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), or the integrated terminal in Visual Studio Code (dotnet add package).

Alternatively, run the following command in the Package Manager Console to achieve the same.

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

If using the WebAssembly or Auto interactive render mode, install the NuGet packages in the client project to add the component to the Web App.

NOTE

Syncfusion® uses SkiaSharp.Views.Blazor version 3.119.1. Ensure this version is referenced.

SkiaSharp Views Blazor

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

Register Syncfusion® Blazor service

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

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.

using BlazorWebAppServer.Components;
using Syncfusion.Blazor;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorComponents() 
        .AddInteractiveServerComponents();

builder.Services.AddSignalR(o => { o.MaximumReceiveMessageSize = 102400000; });

builder.Services.AddMemoryCache();
//Add Syncfusion Blazor service to the container.
builder.Services.AddSyncfusionBlazor();

var app = builder.Build();

....
using BlazorWebApp.Client.Pages;
using BlazorWebApp.Components;
using Syncfusion.Blazor;

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorComponents()
.AddInteractiveWebAssemblyComponents();

builder.Services.AddMemoryCache();
//Add Syncfusion Blazor service to the container
builder.Services.AddSyncfusionBlazor();

var app = builder.Build();

....
using BlazorWebAppAuto.Client.Pages;
using BlazorWebAppAuto.Components;
using Syncfusion.Blazor;

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents() .AddInteractiveWebAssemblyComponents();

builder.Services.AddSignalR(o => { o.MaximumReceiveMessageSize = 102400000; });

builder.Services.AddMemoryCache();
//Add Syncfusion Blazor service to the container
builder.Services.AddSyncfusionBlazor();

var app = builder.Build();

....

NOTE

Processing Large Files Without Increasing Maximum Message Size in SfPdfViewer Component

Add stylesheet and script

Add the following stylesheet and script to the head section of ~/Components/App.razor.

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

Add the Syncfusion® PDF Viewer (Next-Gen) component in the ~/Pages/*.razor file. If interactivity location is Per page/component, define a render mode at the top of the page as follows:

Interactivity location RenderMode Code
Per page/component Auto @rendermode InteractiveAuto
  WebAssembly @rendermode InteractiveWebAssembly
  Server @rendermode InteractiveServer
  None —

NOTE

If the interactivity location is set to Global and the render mode is set to Auto, WebAssembly, or Server, the render mode is configured in the App.razor file by default.


Enable interactivity only via client-side rendering (CSR) by using the WebAssembly or Auto option

@* Your App render mode define here *@
@rendermode InteractiveAuto

Add the Syncfusion® PDF Viewer component in ~/Pages/Index.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.

Run the app

Run the app to display the PDF in the Syncfusion® Blazor PDF Viewer in the browser.

Blazor Web App SfPdfViewer rendering in browser

NOTE

View the sample on GitHub.

See also