Syncfusion AI Assistant

How can I help you?

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

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

  • System requirements for Blazor components

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

NOTE

The PDF Viewer supports .NET 8.0 and later.

Install NuGet packages

To add the Blazor PDF Viewer, 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.119.1. Ensure this version is referenced.

Prerequisites

  • System requirements for Blazor components

  • 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

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 supports .NET 8.0 and later.

Install Syncfusion® Blazor NuGet packages in the app

  • Press Ctrl+` to open the integrated terminal in Visual Studio Code.
  • Ensure you’re in the project root directory where your .csproj file is located.
  • Run the following commands to install the required NuGet packages and their dependencies.
dotnet add package Syncfusion.Blazor.SfPdfViewer -v 33.1.44
dotnet add package Syncfusion.Blazor.Themes -v 33.1.44
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.

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();

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