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

12 Nov 20243 minutes to read

In this section, we’ll guide you through the process of adding Syncfusion’s Blazor PDF Viewer (Next Gen) component to your Blazor WebAssembly (WASM) app. We’ll break it down into simple steps to make it easy to follow. Additionally, you can find a fully functional example project on our GitHub repository.

Prerequisites

System requirements for Blazor components
To use the PDF Viewer (Next Gen) component in a Blazor WebAssembly application with SkiaSharp, make sure to have the required .NET workloads installed by executing the following commands in the command prompt.
- dotnet workload install wasm-tools
- dotnet workload install wasm-tools-net6

Create a new Blazor App in Visual Studio

Create a new Blazor WebAssembly app and name it PDFViewerGettingStarted.

NOTE

The PDF Viewer (Next Gen) component is supported from .NET 6.0 onwards.

Install Blazor PDF Viewer NuGet package in Blazor WASM App

Add the following NuGet packages into the Blazor WebAssembly app.

NOTE

On the Syncfusion side, we are using SkiaSharp.Views.Blazor version 2.88.8. Please make sure to reference this version as well.

Add the following PropertyGroup and ItemGroup:

C#
<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:

~/_Imports.razor

@using Syncfusion.Blazor;
@using Syncfusion.Blazor.SfPdfViewer;

.NET 6 & .NET 7 (~/Program.cs)
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();

Adding stylesheet and script

Add the following stylesheet and script to the head section of the wwwroot/index.html file.

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

Adding Blazor PDF Viewer (Next Gen) Component

Add the Syncfusion PDF Viewer (Next Gen) component in the ~/Pages/Index.razor file.

RAZOR
@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 (Next Gen) 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’s Blazor PDF Viewer (Next Gen) component in your browser.