Open and Display PDFs from a Blob Using JavaScript

PSPDFKit for Web 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. Just set it in the document property of the PSPDFKit.Configuration object passed to PSPDFKit.load(). If your source document is available as a Blob, you can obtain an object URL for it and pass it in document:

const documentBlobObjectUrl = URL.createObjectURL(blob);
PSPDFKit.load({
	document: documentBlobObjectUrl
})
	.then(instance => {
		// Make sure we revoke the object URL so the browser doesn't hold on to the blob object, not needed any more.
		URL.revokeObjectURL(documentBlobObjectUrl);
	});

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

const documentBlobObjectUrl = URL.createObjectURL(blob);
PSPDFKit.load({
	document: documentBlobObjectUrl,
	initialViewState: new PSPDFKit.ViewState({
		pageIndex: 8,
		sidebarMode: PSPDFKit.SidebarMode.THUMBNAILS
	})
})
	.then(instance => {
		// Make sure we revoke the object URL so the browser doesn't hold on to the blob object, not needed any more.
		URL.revokeObjectURL(documentBlobObjectUrl);
	});

Loading Options

You can open files in any of the supported file formats: PDF, JPEG, PNG, and TIFF (for both Standalone and Server-backed deployments) and Word files (for Server-backed deployments only).

PSPDFKit.load() also accepts different configuration options:

Example:

PSPDFKit.load({
  document: documentUrl,
  toolbarItems: PSPDFKit.defaultToolbarItems.filter(item => item.type !== "print"),
  initialViewState: new PSPDFKit.ViewState({
    sidebarMode: PSPDFKit.SidebarMode.THUMBNAILS
  })
})