How to preview PDF files in Power Pages using the Nutrient SDK: Loading files

(This is not a sponsored post, I recently tried out Nutrient SDK for a proof of concept and thought it might be useful to share my findings)

Building a Power Pages portal where users need to interact with documents? Sometimes your users might need to see and make annotations, comments, a table of contents, draw on the document, or add comments to a file stored in Dataverse. And for those advanced document interactions, the Nutrient SDK (formerly PSPDFKit) is a powerful commercial tool.

Natively, it will bring:

Document thumbnails:

Document ouline (index):

Load comments/annotations already merged on the PDF file:

In this post, we will look at how to fetch a PDF from a Dataverse attachment using the Power Pages Web API, load it into the Nutrient viewer as a Base64 string.

Prerequisites

• Enable Web API for the RichTextAttachments table on Power Pages site
• Enable Table Permissions for this table
• Have one PDF file uploaded as attachment there

The Solution: Load the file content as base64
To load the file in the viewer will pass data a data string with the file content:

1. We retrieve the PDF attachment via the Web API, which gives us a Base64 encoded string.
2. We then feed this directly to the viewer.

Let’s get straight to the code.

Set up the Web Template (HTML)
First, we need to load the Nutrient library via their CDN and create a container for the viewer.

<script src="https://cdn.cloud.pspdfkit.com/pspdfkit-web@1.11.0/nutrient-viewer.js"></script>

<div class="pnp-body">
    <div class="pnp-content">      

        <div id="pdfViewerContainerNutrient">
            <div id="pspdfkit" style="width: 100%; height: 900px;"></div>
        </div>
    </div>
</div>

Fetch the Base64 file data using the Web API

If your PDF is stored as an attachment (Note) in Dataverse, the file content is stored as a Base64 string in the documentbody column. We will use the standard Power Pages webapi.safeAjax wrapper to retrieve it.

let currentDocumentId = "YOUR_DATAVERSE_RECORD_ID"; // The ID of the parent record
const containerId = "#nutrientViewer";
 $(document).ready(
    function () {
      PreviewDataverseRTFFile(currentDocumentId)
    }
  )

function PreviewDataverseRTFFile(fileId) {
        webapi.safeAjax({
                type: "GET",
                url: `/_api/msdyn_richtextfiles(${fileId})/msdyn_fileblob`,
                contentType: "application/json",
                headers: {
                        "Prefer": "odata.include-annotations=*"
                },
                success: async function (data, textStatus, xhr) {
                        var result = data["value"];
                        if(result){                               
                                loadNutrientPdfViewer(result);
                        }else{
                                $(".loader").hide();
                        }
                },
                error: function (xhr, textStatus, errorThrown) {
                        console.log(xhr);
                }
        });
}

Load the PDF into the Viewer

Now, we take that Base64 string and format it as a standard data URI so the Nutrient viewer can read it natively:

let nutrientInstance = null;

function loadNutrientPdfViewer(base64FileData) {        
        window.NutrientViewer.unload(containerId);
        const documentUri = `data:application/pdf;base64,${base64FileData}`;
       
        window.NutrientViewer.load({               
                toolbarItems,
                container: containerId,
                document: documentUri,
                initialViewState: new NutrientViewer.ViewState({
                        sidebarMode: NutrientViewer.SidebarMode.THUMBNAILS
                })
        }).then((instance) => {
                console.log("Nutrient Viewer loaded successfully!");
                nutrientInstance = instance;
                $(".loader").hide();
        }).catch(error => {
                console.error("Failed to load document:", error);
        });
}

Results

When the page loads, the file will be loaded, and you can browse the table of contents (outline), annotations, see thumbnails, etc:

Conclusion

This initial post explains how to load files using the Nutrient viewer. In a following post, I will be detailing better how to handle exporting and loading annotations to Dataverse.

From my experience so far, for files up to 50MB, it works really well, but for larger files, the browser struggles with memory. For browsing larger files, the product offers a Document Engine Server (licensed separately) that can stream large files into the viewer; however, the solution will turn out to be more complex if it involves it.

The post How to preview PDF files in Power Pages using the Nutrient SDK: Loading files appeared first on michelcarlo.

Original Post https://michelcarlo.com/2026/03/31/how-to-preview-pdf-files-in-power-pages-using-the-nutrient-sdk-part-1-loading-files/