Syncfusion AI Assistant

How can I help you?

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

12 Feb 20264 minutes to read

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

NOTE

The PDF Viewer supports .NET 8.0 and later.

Install PDF Viewer NuGet packages

Install the following NuGet packages in 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 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

Add the following stylesheet and script to the head and body sections 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 the 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

Run the app on Windows.

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

View the sample on GitHub.

See also