View PDF files using PDF Viewer Component in the Blazor Web app

13 Dec 20247 minutes to read

In this section, we’ll guide you through the process of adding Syncfusion® Blazor PDF Viewer component to your Blazor web app using Visual Studio. We’ll break it down into simple steps to make it easy to follow.

Prerequisites

  • System requirements for Blazor components

  • If you choose an Interactive render mode such as WebAssembly or Auto, ensure that you have the necessary .NET workloads installed to use the PDF Viewer component in a Blazor WebApp application with SkiaSharp. To do this, execute the following commands in the command prompt:

    • 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.
You need to configure the corresponding Interactive render mode and Interactivity location while creating a Blazor Web Application.

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 you select an Interactive render mode as WebAssembly or Auto, you can install the NuGet package in the client-side project to add component in Web App.

NOTE

If you select an Interactive render mode as WebAssembly or Auto, you can install the NuGet package in the client-side project to add component in Web App.
On the Syncfusion® side, we are using SkiaSharp.Views.Blazor version 2.88.8. Please make sure to reference this version as well.

SkiaSharp Views Blazor

Add the following PropertyGroup and ItemGroup

Interactive render mode as WebAssembly or Auto, need to add the following property group and item group in client project.

<PropertyGroup>
	<WasmNativeStrip>true</WasmNativeStrip>
	<WasmBuildNative>true</WasmBuildNative>
</PropertyGroup>

<ItemGroup>
    <NativeFileReference Include="$(SkiaSharpStaticLibraryPath)\3.1.34\st\*.a" />
</ItemGroup>

The above configuration is required only for .NET 9 projects. Please ensure you use this setup for the corresponding version.

Register Syncfusion® Blazor Service

  • 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 you select an Interactive render mode as WebAssembly or Auto, you need to register the Syncfusion® Blazor service in both ~/Program.cs files of your 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();

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

Adding Blazor PDF Viewer Component

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

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

NOTE

If an interactivity location as Global no need to mention render mode. Set the interactivity mode for whole sample.

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 you don’t provide the DocumentPath property value, the PDF Viewer component will be rendered without loading the PDF document. Users can then use the open option from the toolbar to browse and open the PDF as required.

Run the application

Run the application, and the PDF file will be displayed using Syncfusion® Blazor PDF Viewer component in your browser.

Blazor SfPdfViewer Component

NOTE

View Sample in GitHub.

See also