View PDF files using the PDF Viewer in a Blazor WebAssembly (WASM) app

This article describes how to add the Syncfusion® Blazor PDF Viewer component to a Blazor WebAssembly (WASM) app using Visual Studio or Visual Studio Code. A fully functional example project is available in the GitHub repository.

Prerequisites

  • System requirements for Blazor components

  • To use the PDF Viewer component in a Blazor WebAssembly application with SkiaSharp, ensure the required .NET workloads are installed by running the following commands:

    • dotnet workload install wasm-tools
    • dotnet workload install wasm-tools-net8

Create a new Blazor App in Visual Studio

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

NOTE

The PDF Viewer component is supported on .NET 8.0 and later.

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

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

NOTE

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

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

Create a new Blazor App in Visual Studio Code

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

Alternatively, create a WebAssembly application using the following command in the terminal (Ctrl+`).

dotnet new blazorwasm -o BlazorApp
cd BlazorApp

NOTE

The PDF Viewer component is supported on .NET 8.0 and later.

Install Syncfusion® Blazor NuGet packages in the app

dotnet add package Syncfusion.Blazor.SfPdfViewer -v 31.2.2
dotnet add package Syncfusion.Blazor.Themes -v 31.2.2
dotnet add package SkiaSharp.Views.Blazor -v 3.116.1
dotnet restore

NOTE

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

NOTE

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

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" />
</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/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 WebAssembly SfPdfViewer rendering in browser

See also