Open a PDF from a remote URL in MAUI

In addition to loading documents directly from local storage using a file picker, from application assets, as an array buffer, or as a Base64 string, Nutrient MAUI SDK includes support for opening documents from remote sources. If you have a remote server, this guide will show you how to seamlessly load documents from it.

Introduction

To open a document, you need to add PDFView to your desired XAML. You’ll also need to assign a Name for interacting with it through code. In this example, PDFView is named PDFView:

<pspdfkit:PDFView x:Name="PDFView" Initialized="OnPDFViewInitialized"
                  License="{OnPlatform
                    Android={StaticResource AndroidLicenseKey},
                    iOS={StaticResource iOSLicenseKey},
                    MacCatalyst={StaticResource MacCatalystLicenseKey},
                    WinUI={StaticResource WindowsLicenseKey}}" />

The rest of the document opening process needs to be done after the PDFView control(opens in a new tab) is loaded. The easiest way to ensure it’s loaded is by using the PDFView.Initialized event as shown above. Alternatively, you can subscribe to it in code-behind as follows:

PDFView.Initialized += (sender, e) =>
{
    // ...
};

If you don’t intend to open a document straight away and you know that PDFView will always be initialized, you can skip this step and open the document whenever it’s convenient.

Opening a document from a remote source

The following example code demonstrates how to load a document from a remote URL:

try
{
    var document = await PSPDFKitController.LoadDocumentFromURLAsync(remoteURL,
        PSPDFKitController.CreateViewerConfiguration());
}
catch (Exception ex)
{
    // Handle exception.
}

Document with authentication

If a document is encrypted, use HTTPClient(opens in a new tab) to fetch the document(opens in a new tab) using the correct headers, and use the IController.LoadDocumentFromBuffer or IController.LoadDocumentFromBase64String method to load the document.

Trying it out in Catalog

1. Download and install npm(opens in a new tab) and the npm serve(opens in a new tab) package.
2. Start a local server using serve folder_path --cors, where the folder path is the path to the folder containing the document.
3. In the Catalog app, select the Load Document example in the sidebar.
4. Select Remote URL as the document source.
5. In the text box, enter the URL of the document you want to load and press Load.