Open PDFs from an ArrayBuffer using JavaScript

Nutrient Web SDK in standalone mode accepts different input data types for a document: either as the document URL string, or as an ArrayBuffer containing the document file. Set it in the document property of the NutrientViewer.Configuration object passed to NutrientViewer.load():

// Standalone mode: loads document directly in the browser
NutrientViewer.load({
  container: "#pspdfkit",
  document: myDocumentArrayBuffer
})
  .then((instance) => {
    console.log("Document loaded successfully");
  })
  .catch((error) => {
    console.error("Failed to load document:", error);
  });

The ArrayBuffer can be constructed from a file in any of the different supported input formats. For fetching one over HTTP with credentials, see load a PDF as an ArrayBuffer.

Nutrient Web SDK takes ownership of the ArrayBuffer passed to NutrientViewer.load(), transferring rather than copying it to avoid holding the document in memory twice — this detaches the original and leaves it at zero length, so reusing it for a second load fails. To open the same document again — for example, after remounting the viewer — keep a separate copy of the bytes beforehand and pass a fresh copy, such as myDocumentArrayBuffer.slice(0), to each load.

It’s also possible to set the initial conditions of the viewer in the same configuration object by setting the initialViewState property. For example, if you want to open a document on page 8 with the thumbnails sidebar open, you can do it like this:

// Standalone mode: loads document with custom initial view state
NutrientViewer.load({
  container: "#pspdfkit",
  document: myDocumentArrayBuffer,
  initialViewState: new NutrientViewer.ViewState({
    pageIndex: 8,
    sidebarMode: NutrientViewer.SidebarMode.THUMBNAILS
  })
})
  .then((instance) => {
    console.log("Document loaded on page 8 with thumbnails");
  })
  .catch((error) => {
    console.error("Failed to load document:", error);
  });

Loading options

Open files in any supported file format.

NutrientViewer.load() accepts the following configuration options:

• annotationTooltipCallback
• customRenderers
• electronicSignatures
• annotationPresets

• autoSaveMode
• baseUrl
• container

• customFonts (Standalone only)

• disableForms
• disableHighQualityPrinting
• disableOpenParameters
• disableTextSelection

• disableWebAssemblyStreaming (Standalone only)
• document (Standalone only)

• editableAnnotationTypes

• enableAutomaticLinkExtraction (Standalone only)

• enableServiceWorkerSupport
• formFieldsNotSavingSignatures
• headless
• initialViewState

• instantJSON (Standalone only)

• isEditableAnnotation
• isEditableComment

• licenseKey (Standalone only)

• locale
• maxDefaultZoomLevel
• maxPasswordRetries
• minDefaultZoomLevel

• overrideMemoryLimit (Standalone only)

• password
• onPasswordRequired
• populateInkSignatures
• populateStoredSignatures
• preventTextCopy
• printMode
• renderPageCallback
• serverUrl
• signal
• stampAnnotationTemplates

• standaloneInstancesPoolSize (Standalone only)

• styleSheets
• theme
• toolbarItems
• toolbarPlacement

• trustedCAsCallback (Standalone only)

• XFDF (Standalone only)

• XFDFKeepCurrentAnnotations (Standalone only)

Example

NutrientViewer.load({
  container: "#pspdfkit",
  document: documentUrl,
  toolbarItems: NutrientViewer.defaultToolbarItems.filter(item => item.type !== "print"),
  initialViewState: new NutrientViewer.ViewState({
    sidebarMode: NutrientViewer.SidebarMode.THUMBNAILS
  })
})
  .then((instance) => {
    console.log("Document loaded successfully");
  })
  .catch((error) => {
    console.error("Failed to load document:", error);
  });