This HTML page is not optimized for LLM or AI agent consumption. Fetch the Markdown version instead: /guides/web/open-a-document/image-from-blob.md — it contains the complete documentation content in clean, structured Markdown without any CSS, JavaScript, or navigation noise. Open image files (JPG, PNG, TIFF) from Blob in JavaScript | Nutrient

Open image files from a Blob using JavaScript

Markdown version of this page, suitable for AI agents and automation
Image

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 your source document is available as a Blob, you can obtain an object URL for it and pass it in document:

// Standalone mode: loads document from Blob via object URL
const documentBlobObjectUrl = URL.createObjectURL(blob);
NutrientViewer.load({
  container: "#pspdfkit",
  document: documentBlobObjectUrl
})
  .then((instance) => {
    // Make sure to revoke the object URL so the browser doesn't hold on to the blob object that's not needed any more.
    URL.revokeObjectURL(documentBlobObjectUrl);
    console.log("Document loaded successfully");
  })
  .catch((error) => {
    URL.revokeObjectURL(documentBlobObjectUrl);
    console.error("Failed to load document:", error);
  });

The Blob can contain 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 document from Blob with custom initial view state
const documentBlobObjectUrl = URL.createObjectURL(blob);
NutrientViewer.load({
  container: "#pspdfkit",
  document: documentBlobObjectUrl,
  initialViewState: new NutrientViewer.ViewState({
    pageIndex: 8,
    sidebarMode: NutrientViewer.SidebarMode.THUMBNAILS
  })
})
  .then((instance) => {
    // Make sure to revoke the object URL so the browser doesn't hold on to the blob object that's not needed any more.
    URL.revokeObjectURL(documentBlobObjectUrl);
    console.log("Document loaded on page 8 with thumbnails");
  })
  .catch((error) => {
    URL.revokeObjectURL(documentBlobObjectUrl);
    console.error("Failed to load document:", error);
  });

Loading options

Open files in any supported file format.

NutrientViewer.load() accepts the following 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);
  });