Open PDFs using DWS Viewer API

Use DWS Viewer API when you want DWS to authorize and meter viewer sessions for Nutrient Web SDK. DWS Viewer API can open DWS-managed documents or app-provided documents.

Open a DWS-managed document

For a DWS-managed document, pass the document’s session token in the configuration object passed to NutrientViewer.load():

NutrientViewer.load({
  container: "<container>",
  session: "<session_token>"
});

The <container> placeholder in the code above should be replaced by a CSS selector or a DOM element where Nutrient Web SDK will be mounted.

The <session_token> placeholder should be replaced by the session token obtained from DWS Viewer API’s dashboard(opens in a new tab) or through its API. Session tokens are used for authenticating Nutrient Web SDK clients when connecting to DWS Viewer API.

Open an app-provided document

If your browser app already has the document, create a DWS Viewer API browser session from your backend by omitting allowed_documents. Then pass both session and document to NutrientViewer.load():

NutrientViewer.load({
  container: "<container>",
  session: "<session_token>",
  document: "/documents/example.pdf"
});

Omit licenseKey for this flow. For the complete backend and frontend flow, refer to the open app-provided documents guide.

To skip the backend, pass a publishable key as session instead of a session token. Create one on the API keys page(opens in a new tab) of the DWS Viewer API dashboard. Publishable keys are safe in browser code and stay valid until you delete them. They work only for app-provided documents.

Recommended: Set Allowed origins on the key for production. Without allowed origins, the key works on any website, and every load with it counts as one of your viewer sessions.

Each viewer load requires a connection to DWS. To learn what keeps working offline after the viewer loads, refer to the offline use and token lifetime section in the open app-provided documents guide.

Saving behavior

DWS Viewer API sessions use Nutrient Instant. In Nutrient Web SDK 1.22 and later, sessions loaded with NutrientViewer.load({ container, session }) save with AutoSaveMode.IMMEDIATE by default. The SDK sends edits as they’re made, so instance.hasUnsavedChanges() reflects the current state. Passing instant: false or an explicit autoSaveMode overrides this default.

For a cross-product overview of Web SDK, Document Engine, and DWS Viewer API document loading workflows, refer to the choose the right document opening and loading setup guide.

Accessing a password-protected document

To load password-protected PDFs, you can provide the password option in the configuration.

Alternatively, you’ll be asked to enter the password through a password prompt.

Loading options

Open files in any supported file format.

NutrientViewer.load() accepts the following configuration options:

• annotationTooltipCallback
• customRenderers
• electronicSignatures
• annotationPresets

• session (DWS Viewer API only)

• autoSaveMode
• baseUrl
• container

• disableForms
• disableHighQualityPrinting
• disableOpenParameters
• disableTextSelection

• document (DWS Viewer API app-provided documents)

• editableAnnotationTypes

• enableServiceWorkerSupport
• formFieldsNotSavingSignatures
• headless
• initialViewState

• instant (Server and DWS-managed Viewer API documents only)

• isEditableAnnotation
• isEditableComment

• locale
• maxDefaultZoomLevel
• maxPasswordRetries
• minDefaultZoomLevel

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

• styleSheets
• theme
• toolbarItems
• toolbarPlacement

Example

NutrientViewer.load({
  container: "#pspdfkit",
  session: "<session_token>",
  // Add `document` here when opening an app-provided document.
  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);
  });