View PDF files using the PDF Viewer in a WinForms Blazor Hybrid App

14 Oct 20257 minutes to read

This article explains how to add the Syncfusion® Blazor PDF Viewer component to a WinForms Blazor Hybrid App using Visual Studio or Visual Studio Code. The result is a desktop application (WinForms) that hosts Blazor UI inside a BlazorWebView control.

Prerequisites

Create a new WinForms app in Visual Studio

Create a WinForms application using Visual Studio 2022 with the WinForms project template. The app will later host Blazor components via BlazorWebView. For reference, see Microsoft Blazor tooling or the Syncfusion® Blazor Extension.

Install Blazor PDF Viewer NuGet package in WinForms App

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

NOTE

Ensure that the package Microsoft.AspNetCore.Components.WebView.WindowsForms updated to version 8.0.16.

WinForms Blazor App SfPdfViewer NuGet package reference

Prerequisites

Create a new WinForms app in Visual Studio Code

Create a WinForms desktop project (not a WinForms Blazor HybridApp) using the .NET CLI in Visual Studio Code. This WinForms project will host Blazor UI through BlazorWebView. For guidance, see Microsoft templates or the Syncfusion® Blazor Extension.

dotnet new winforms -n WinFormsBlazorHybridApp

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

Install the required NuGet packages in the WinForms project that will host the Blazor UI.

dotnet add package Syncfusion.Blazor.SfPdfViewer -v 31.2.12
dotnet add package Syncfusion.Blazor.Themes -v 31.2.12
dotnet add package Microsoft.AspNetCore.Components.WebView.WindowsForms

dotnet restore

NOTE

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

NOTE

Ensure that the package Microsoft.AspNetCore.Components.WebView.WindowsForms updated to version 8.0.16.

Register Syncfusion® Blazor service

The WinForms project must target Windows and enable WinForms. A typical project file looks like the following.

<Project Sdk="Microsoft.NET.Sdk.Razor">

    ....

</Project>

Create a Component folder, add an _Imports.razor file in it, and include the required component namespaces within that folder.

@using Microsoft.AspNetCore.Components.Web
@using Syncfusion.Blazor.SfPdfViewer

Create wwwroot folder and index.html file

  • Create a new folder named wwwroot in the WinForms project root.

  • Inside wwwroot, create an index.html host page for the Blazor UI. This host page is required by BlazorWebView to initialize the Blazor runtime and load static assets (themes and scripts). A basic index.html might look like the following:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WinForms Blazor Hybrid App</title>
    <base href="/" />
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>
<body>
    <div id="app">Loading...</div>
    <script src="_framework/blazor.webview.js"></script>
    <script src="_content/Syncfusion.Blazor.SfPdfViewer/scripts/syncfusion-blazor-sfpdfviewer.min.js" type="text/javascript"></script>
</body>
</html>

NOTE

Ensure that the PDF Viewer static assets (themes and scripts) are loaded properly.

Register Syncfusion Blazor services and BlazorWebView in ~/Form1.cs so that the WinForms window can host Blazor components.

namespace WinFormsBlazorHybridApp;
using Microsoft.AspNetCore.Components.WebView.WindowsForms;
using Microsoft.Extensions.DependencyInjection;
using Syncfusion.Blazor;
using WinFormsBlazorHybridApp.Components;

....
        InitializeComponent();
        ServiceCollection services = new ServiceCollection();
        services.AddWindowsFormsBlazorWebView();
        services.AddMemoryCache();
        services.AddSyncfusionBlazor();
        BlazorWebView blazorWebView = new BlazorWebView()
        {
            HostPage = "wwwroot\\index.html",
            Services = services.BuildServiceProvider(),
            Dock = DockStyle.Fill
        };
        blazorWebView.RootComponents.Add<YourRazorFileName>("#app");
        <!-- Replace 'YourRazorFileName' with the actual Razor component class (e.g., Main) in your project's namespace -->
        this.Controls.Add(blazorWebView);
....

Adding Blazor PDF Viewer component

Create a Razor component (for example, PDFViewer.razor) in the project and add the Syncfusion® PDF Viewer component to it within the Component folder

@using Syncfusion.Blazor.SfPdfViewer;

<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 document. Users can use the Open toolbar option to browse and open a PDF.

Run the application

Run the WinForms application. The Syncfusion® Blazor PDF Viewer renders inside the WinForms window.

WinForms Blazor HybridApp SfPdfViewer rendering in browser

View the sample on GitHub.

See also