Open PDFs from Base64 in the browser using JavaScript

PDF

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().

If you need to open a document file encoded as Base64 data, pass it as a dataURL:

// Standalone mode: loads Base64-encoded document directly in the browser
NutrientViewer.load({
  container: "#pspdfkit",
  document: `data:application/pdf;base64,${base64EncodedDocument}`
})
  .then((instance) => {
    console.log("Document loaded successfully");
  })
  .catch((error) => {
    console.error("Failed to load document:", error);
  });

The Base64-encoded string can be constructed from a file in any of the different supported input formats.

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, do it like this:

// Standalone mode: loads Base64-encoded document with custom initial view state
NutrientViewer.load({
  container: "#pspdfkit",
  document: `data:application/pdf;base64,${base64EncodedDocument}`,
  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

You can open files in any of the supported file formats.

NutrientViewer.load() also accepts different configuration options:

  • XFDF (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);
  });