Open and Display PDF Files from Server Using JavaScript

To load a document from a remote URL in Standalone mode, you only need to pass it in the configuration object passed to PSPDFKit.load():

PSPDFKit.load({
	document: documentUrl
});

Accessing an Authenticated Document

However, sometimes you want to restrict access to your documents so they’re not publicly available on the internet. One common way to achieve this is with HTTP Basic authentication.

If you try to load a document from a URL that’s protected by HTTP Basic authentication, PSPDFKit will ask you for a username and password. To avoid entering these, you can fetch the document yourself, passing the credentials as an Authorization header. Once you’ve received the response, you can pass it to the PSPDFKit.load() method as an ArrayBuffer:

async function loadProtectedPDF(documentUrl, username, password) {
	// Base64 encode your credentials and set them as an `Authorization` header.
	const headers = new Headers();
	const encodedCredentials = btoa(`${username}:${password}`);
	headers.set("Authorization", `Basic ${encodedCredentials}`);

	// Fetch the PDF and read the response as an `ArrayBuffer`.
	const pdfResponse = await fetch(documentUrl, { headers });
	const documentBuffer = await pdfResponse.arrayBuffer();

	// Pass the `ArrayBuffer` as a PDF option instead of a URL.
	return PSPDFKit.load({
		document: documentBuffer
	});
}

Accessing an Encrypted Document

The easiest way to securely transfer your document is to serve it through HTTPS. This way, the browser will take care of decrypting the secured communication for you.

Additionally, you can encrypt the document’s content on the server using your own custom encryption. When you fetch the encrypted document, decrypt the data in the browser into an ArrayBuffer. Then pass it to the PSPDFKit.load() method, which will render your document:

PSPDFKit.load({
	document: myDecryptedArrayBuffer
});

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
  })
})