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

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

Prerequisites

  • System requirements for Blazor components

  • 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

Create a new Blazor Web App in Visual Studio

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

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

Install Blazor PDF Viewer NuGet package in Blazor Web App

To add Blazor PDF Viewer component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install

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

SkiaSharp Views Blazor

Prerequisites

  • System requirements for Blazor components

  • 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

Create a new Blazor Web App in Visual Studio Code

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

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

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

NOTE

For more information on creating a Blazor Web App with various interactive modes and locations, see Render interactive modes.

Install Syncfusion® Blazor SfPdfViewer and Themes NuGet packages in the app

If using WebAssembly or Auto render modes in the Blazor Web App, install the Syncfusion® Blazor component 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 commands to install the Syncfusion.Blazor.SfPdfViewer and Syncfusion.Blazor.Themes NuGet packages and ensure all dependencies are installed.
dotnet add package Syncfusion.Blazor.SfPdfViewer -v 31.2.2
dotnet add package Syncfusion.Blazor.Themes -v 31.2.2
dotnet restore

NOTE

Syncfusion® Blazor components are available on nuget.org. See NuGet packages for the list of available packages and component details.

NOTE

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

  • dotnet add package SkiaSharp.Views.Blazor -v 3.116.1

SkiaSharp Views Blazor

Register Syncfusion® Blazor Service

Interactive Render Mode Description
WebAssembly or Auto Open ~/_Imports.razor from the client project.
Server Open ~/Components/_Imports.razor.
  • In the ~/_Imports.razor file, add the following namespaces:
@using Syncfusion.Blazor;
@using Syncfusion.Blazor.SfPdfViewer;
  • Register the Syncfusion® Blazor Service in the ~/Program.cs file of your Blazor Web App.

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.

If the interactive render mode is set to Server, the project contains a single ~/Program.cs file. Register the Syncfusion® Blazor Service only in that file.

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();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseAntiforgery();

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

app.Run();
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();
if (app.Environment.IsDevelopment())
{
app.UseWebAssemblyDebugging();
}
else
{
app.UseExceptionHandler("/Error", createScopeForErrors: true);
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseAntiforgery();

app.MapRazorComponents<App>()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(Counter).Assembly);

app.Run();
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();
if (app.Environment.IsDevelopment())
{
app.UseWebAssemblyDebugging();
}
else
{ app.UseExceptionHandler("/Error", createScopeForErrors: true);
    app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseAntiforgery();

app.MapRazorComponents<App>()
.AddInteractiveServerRenderMode() .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(Counter).Assembly);

NOTE

Processing Large Files Without Increasing Maximum Message Size in SfPdfViewer Component

Adding stylesheet and script

Add the following stylesheet and script to the head section of the ~/Components/App.razor 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>

Adding Blazor PDF Viewer Component

Add the Syncfusion® PDF Viewer (Next-Gen) component in the ~Pages/.razor file. If the interactivity location is set to Per page/component, define a render mode at the top of the ~Pages/.razor component 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.

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

NOTE

If the interactivity location is set to Global, a render mode does not need to be specified per page. The interactivity mode applies to the entire app.

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

@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 document. Users can use the Open option in the toolbar to browse and open a PDF as needed.

Run the application

Run the application to display the PDF file in the Syncfusion® Blazor PDF Viewer component in the browser.

Blazor Web App SfPdfViewer rendering in browser

NOTE

View the sample on GitHub.

See also