Syncfusion AI Assistant

How can I help you?

Getting Started with the PDF Viewer in .NET MAUI Blazor Hybrid App

25 May 20265 minutes to read

This section explains how to create and run a .NET MAUI Blazor Hybrid application using the Syncfusion® Blazor PDF Viewer component.

Prerequisites

To use the .NET MAUI project templates, install the Mobile development with .NET workload for Visual Studio. For installation details, see the Microsoft documentation: Install .NET MAUI.

Create a new Blazor .NET MAUI app in Visual Studio

Create a Blazor MAUI App named PDFViewerGettingStarted using Visual Studio via Microsoft Templates.

NOTE

The PDF Viewer supports .NET 8.0 and later.

Install Syncfusion® Blazor SfPdfViewer NuGet Packages

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

Alternatively, you can utilize the following package manager command to achieve the same.

Install-Package Syncfusion.Blazor.SfPdfViewer -Version 33.2.3
Install-Package Syncfusion.Blazor.Themes -Version 33.2.3

Add import namespaces

After the packages are installed, open the ~/_Imports.razor file and import the Syncfusion.Blazor and Syncfusion.Blazor.SfPdfViewer namespaces.

@using Syncfusion.Blazor
@using Syncfusion.Blazor.SfPdfViewer

Register Syncfusion® Blazor Service

Register the Syncfusion® Blazor service in the ~/MauiProgram.cs file.

using Microsoft.Extensions.Logging;
using MauiBlazorWindow.Data;
using Syncfusion.Blazor;

namespace MauiBlazorWindow;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

        builder.Services.AddMauiBlazorWebView();
        builder.Services.AddMemoryCache();

#if DEBUG
        builder.Services.AddBlazorWebViewDeveloperTools();
        builder.Logging.AddDebug();
#endif

        builder.Services.AddSingleton<WeatherForecastService>();
        builder.Services.AddSyncfusionBlazor();
        return builder.Build();
    }
}

Add stylesheet and script resources

The theme stylesheet and script can be accessed from NuGet through Static Web Assets. Include the stylesheet in the <head> and the script at the end of the <body> in the ~/wwwroot/index.html file as shown below:

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

NOTE

Check out the Blazor Themes topic to explore supported ways (such as static assets, CDN, and CRG) to apply themes in your Blazor application. Also, check out the Adding Script Reference topic to learn different approaches for adding script references in your Blazor application.

Add Syncfusion® Blazor PDF Viewer Component

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

@page "/"
@using Syncfusion.Blazor.SfPdfViewer

<SfPdfViewer2 DocumentPath="@DocumentPath"
              Height="100%"
              Width="100%">
</SfPdfViewer2>

@code {
    public string DocumentPath { get; set; } = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
}

NOTE

If the DocumentPath property is not set, the PDF Viewer renders without loading a document. Use the Open toolbar option to browse and open a PDF.

Run on Windows

In the Visual Studio toolbar, click the Windows Machine to build and run the app. Ensure the run profile is set to Windows Machine before starting the app.

Running the app on a Windows machine

After the application launches, the PDF Viewer renders the specified PDF document.

Blazor SfPdfViewer rendering the PDF document

Run on Android

To run the PDF Viewer on Android using the Android emulator, follow these steps:

Android emulator configuration for .NET MAUI

For setup and usage, see Android Emulator setup for .NET MAUI.

NOTE

If any errors occur while using the Android Emulator, see Troubleshooting Android Emulator.

Blazor SfPdfViewer running in the Android emulator

NOTE

To learn how to open, view, or interact with PDF files in the PDF Viewer component, see Open and Save. For a hands-on reference with working code examples, explore the sample projects available on GitHub.

See Also