View PDF files using the PDF Viewer in a Blazor .NET MAUI app

13 Oct 20254 minutes to read

This article describes how to add the Syncfusion® Blazor PDF Viewer component to a Blazor .NET MAUI app and deploy it on Windows.

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 new Blazor .NET MAUI app and name it PDFViewerGettingStarted.

NOTE

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

Install PDF Viewer NuGet packages in the Blazor .NET MAUI app

Add the following NuGet packages to the Blazor .NET MAUI app.

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 ~/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();
    }
}

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>

Add the PDF Viewer component

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

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

Run on Windows

Run the sample on a Windows machine to execute the Blazor .NET MAUI 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 in a Blazor .NET MAUI Android application 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

View the sample on GitHub.

See also