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

13 Dec 20243 minutes to read

In this section, we’ll guide you through the process of adding Syncfusion® Blazor PDF Viewer 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 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 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:

<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.
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.

<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/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

See also