Syncfusion AI Assistant

How can I help you?

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

24 Apr 20265 minutes to read

This article shows how to add the Syncfusion® Blazor PDF Viewer 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

NOTE

To use the PDF Viewer with SkiaSharp in a Blazor WebAssembly app, ensure the required .NET workloads are installed by running:

  • dotnet workload install wasm-tools
  • dotnet workload install wasm-tools-net8 (For .NET 8.0) or dotnet workload install wasm-tools-net9 (For .NET 9.0) or dotnet workload install wasm-tools-net10 (For .NET 10.0)

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.

Install NuGet packages

To add the Blazor PDF Viewer component, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), or the integrated terminal in Visual Studio Code (dotnet add package).

Alternatively, run the following command in the Package Manager Console to achieve the same.

dotnet add package Syncfusion.Blazor.SfPdfViewer -v 33.2.3
dotnet add package Syncfusion.Blazor.Themes -v 33.2.3
dotnet add package SkiaSharp.Views.Blazor -v 3.119.1
dotnet restore

NOTE

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

Prerequisites

NOTE

To use the PDF Viewer with SkiaSharp in a Blazor WebAssembly app, ensure the required .NET workloads are installed by running:

  • dotnet workload install wasm-tools
  • dotnet workload install wasm-tools-net8 (For .NET 8.0) or dotnet workload install wasm-tools-net9 (For .NET 9.0) or dotnet workload install wasm-tools-net10 (For .NET 10.0)

Create a new Blazor App in Visual Studio Code

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

Install Syncfusion® Blazor NuGet packages in the app

To add the Blazor PDF Viewer component, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), or the integrated terminal in Visual Studio Code (dotnet add package).

Alternatively, run the following command in the Package Manager Console to achieve the same.

dotnet add package Syncfusion.Blazor.SfPdfViewer -v 33.2.3
dotnet add package Syncfusion.Blazor.Themes -v 33.2.3
dotnet add package SkiaSharp.Views.Blazor -v 3.119.1
dotnet restore

NOTE

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

Add import namespaces

  • In the ~/_Imports.razor file, add the following namespaces:
@using Syncfusion.Blazor
@using Syncfusion.Blazor.SfPdfViewer

Register Syncfusion® Blazor Service

  • Register the Syncfusion® Blazor service in the ~/Program.cs file of your Blazor WebAssembly App.
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();

Add stylesheet and script

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

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

Add Blazor PDF Viewer component

Add the Syncfusion® PDF Viewer (Next-Gen) component to ~/Pages/Index.razor.

@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. Use the Open toolbar option to browse and open a PDF.

Run the app

Run the app to display the PDF in the Syncfusion® Blazor PDF Viewer in the browser.

Blazor WebAssembly SfPdfViewer rendering in browser

NOTE

View the sample on GitHub.

See also