Render PDF document from embedded source in the MAUI Android app

13 Dec 20242 minutes to read

In this section, we’ll guide you how to render PDF Viewer from embedded source in a MAUI app. We’ll break it down into simple steps to make it easy to follow.

Refer here to create MAUI app.

Add PDF Viewer component

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

@page "/"

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

@code {
    SfPdfViewer2 viewer;
    private string DocumentPath { get; set; } = "";

    protected override void OnInitialized()
    {
        string basePath = "MauiBlazorAndroid.wwwroot.data.pdf_succinctly.pdf";
        Stream DocumentStream = this.GetType().Assembly.GetManifestResourceStream(basePath);
        DocumentStream.Position = 0;
        using (MemoryStream memoryStream = new MemoryStream())
        {
            DocumentStream.CopyTo(memoryStream);
            byte[] bytes = memoryStream.ToArray();
            string base64String = Convert.ToBase64String(bytes);
            string base64prefix = "data:application/pdf;base64,";
            //Assigned the base64 path to the PDF document path.
            DocumentPath = $"{base64prefix}{base64String}";
        }
        base.OnInitialized();
    }
}

NOTE

When developing a Blazor Android MAUI application, passing the DocumentPath to the PDF Viewer component as a base64 string is needed. This ensures that the application can retrieve and render a PDF document correctly within the PDF Viewer component.

Run on Android emulator

To run the PDF Viewer in a Blazor Android MAUI application using the Android emulator, follow these steps:

Run Windows machine

Step 1 Set up the necessary dependencies, SDKs, and tools for Blazor Android MAUI on your Windows machine. Ensure that you have installed the required Android SDK licenses. If any errors occur during installation, follow the provided prompts or instructions to resolve them.

android-sdk-liscence

Step 2 Right-click the ~wwwroot/data/pdf_succinctly.pdf file in Solution Explorer, go to Properties, and set Build Action to Embedded Resource and Copy to Output Directory to Copy Always.

android_maui_properties

Step 3 Install and launch the Android Device Manager. Open the Android SDK Manager, go to the SDK Tools tab, select the Android Device Manager checkbox, and click Apply or OK. This will allow you to create, manage, and launch Android Virtual Devices (AVD’s) for testing and running Android applications.

picxel emulator

Step 4 Ensure the Android emulator is running. Launch the Android Device Manager and create or select an existing AVD to run the emulator.

Now, relaunch the project in emulator mode. It will render the PDF Viewer component using the Blazor Android MAUI application.

NOTE

If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidanceTroubleshooting Android Emulator.

Blazor SfPdfViewer Component

View Sample in GitHub.

See also