SDK

Low-Code

Workflow

DWS API

Open local image files using JavaScript

In standalone mode, sometimes you’ll want to keep a document persisted in the browser’s local storage. Since local storage only accepts data as a string, you can use Base64 to encode and decode the document storing it.

First export the document as an ArrayBuffer, and then store it as a Base64 string:

const myDocumentArrayBuffer = await instance.exportPDF();
let base64EncodedDocument = '';
const len = myDocumentArrayBuffer.byteLength;
for (let i = 0; i < len; i++) {
	base64EncodedDocument += String.fromCharCode(myDocumentArrayBuffer[i]);
}
window.localStorage.setItem('document', base64EncodedDocument);

You can load this document later by retrieving the Base64 string from local storage and passing it as a data URL in the configuration object passed to PSPDFKit.load():

const base64EncodedDocument = window.localStorage.getItem('document');
PSPDFKit.load({
	// `base64Decode` is a user function that decodes a Base64 string into an `ArrayBuffer`.
	document: `data:application/pdf;base64,${base64EncodedDocument}`
});

Now what if, instead of opening the document from local storage, you want to let the user select a file from the local file system?

Since uploaded files are received as File objects that share the Blob API, you can proceed similarly to how you do with Blob:

// `event` is an HTML change event from an <input type="file"> element.
const documentFileObjectUrl = URL.createObjectURL(event.target.files[0]);
PSPDFKit.load({
	document: documentFileObjectUrl
})
	.then(instance => {
		// Make sure to revoke the object URL so the browser doesn't hold on to the file object that's not needed any more.
		URL.revokeObjectURL(documentFileObjectUrl);
	});

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 2 with the thumbnails sidebar open, do it like this:

// `event` is an HTML change event from an <input type="file"> element.
const documentFileObjectUrl = URL.createObjectURL(event.target.files[0]);
PSPDFKit.load({
	document: documentFileObjectUrl,
    initialViewState: new PSPDFKit.ViewState({
      pageIndex: 2,
      sidebarMode: PSPDFKit.SidebarMode.THUMBNAILS
    })
})
	.then(instance => {
		// Make sure to revoke the object URL so the browser doesn't hold on to the file object that's not needed any more.
		URL.revokeObjectURL(documentFileObjectUrl);
	});

Here’s a complete example that accepts all Standalone-supported input file formats:

<html>
	<head>
		<title>Open local file system PDF</title>
		<style>
			html,
			body {
				height: 100%;
			}
			#pdfContainer {
				height: 90%;
			}
		</style>
	</head>
	<body>
		<input
			type="file"
			accept="application/pdf,image/png,image/jpeg,image/tiff"
		/>
		<div id="pdfContainer"></div>
		<script
			src="/node_modules/pspdfkit/dist/pspdfkit.js"
			type="text/javascript"
		></script>
		<script type="text/javascript">
			document.addEventListener("change", function (event) {
				if (event.target.files.length === 1) {
					const documentFileObjectUrl = URL.createObjectURL(event.target.files[0]);
					PSPDFKit.load({
						container: "#pdfContainer",
						document: documentFileObjectUrl,
						initialViewState: new PSPDFKit.ViewState({
							pageIndex: 2,
							sidebarMode: PSPDFKit.SidebarMode.THUMBNAILS
						})
					})
						.then(instance => {
							// Make sure to revoke the object URL so the browser doesn't hold on to the file object that's not needed any more.
							URL.revokeObjectURL(documentFileObjectUrl);
						});
				}
			});
		</script>
	</body>
</html>

Loading options

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

PSPDFKit.load() also accepts different configuration options:

Example:

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

In standalone mode, sometimes you’ll want to keep a document persisted in the browser’s local storage. Since local storage only accepts data as a string, you can use Base64 to encode and decode the document storing it.

First export the document as an ArrayBuffer, and then store it as a Base64 string:

const myDocumentArrayBuffer = await instance.exportPDF();
let base64EncodedDocument = '';
const len = myDocumentArrayBuffer.byteLength;
for (let i = 0; i < len; i++) {
	base64EncodedDocument += String.fromCharCode(myDocumentArrayBuffer[i]);
}
window.localStorage.setItem('document', base64EncodedDocument);

You can load this document later by retrieving the Base64 string from local storage and passing it as a data URL in the configuration object passed to PSPDFKit.load():

const base64EncodedDocument = window.localStorage.getItem('document');
PSPDFKit.load({
	// `base64Decode` is a user function that decodes a Base64 string into an `ArrayBuffer`.
	document: `data:application/pdf;base64,${base64EncodedDocument}`
});

Now what if, instead of opening the document from local storage, you want to let the user select a file from the local file system?

Since uploaded files are received as File objects that share the Blob API, you can proceed similarly to how you do with Blob:

// `event` is an HTML change event from an <input type="file"> element.
const documentFileObjectUrl = URL.createObjectURL(event.target.files[0]);
PSPDFKit.load({
	document: documentFileObjectUrl
})
	.then(instance => {
		// Make sure to revoke the object URL so the browser doesn't hold on to the file object that's not needed any more.
		URL.revokeObjectURL(documentFileObjectUrl);
	});

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 2 with the thumbnails sidebar open, do it like this:

// `event` is an HTML change event from an <input type="file"> element.
const documentFileObjectUrl = URL.createObjectURL(event.target.files[0]);
PSPDFKit.load({
	document: documentFileObjectUrl,
    initialViewState: new PSPDFKit.ViewState({
      pageIndex: 2,
      sidebarMode: PSPDFKit.SidebarMode.THUMBNAILS
    })
})
	.then(instance => {
		// Make sure to revoke the object URL so the browser doesn't hold on to the file object that's not needed any more.
		URL.revokeObjectURL(documentFileObjectUrl);
	});

Here’s a complete example that accepts all Standalone-supported input file formats:

<html>
	<head>
		<title>Open local file system PDF</title>
		<style>
			html,
			body {
				height: 100%;
			}
			#pdfContainer {
				height: 90%;
			}
		</style>
	</head>
	<body>
		<input
			type="file"
			accept="application/pdf,image/png,image/jpeg,image/tiff"
		/>
		<div id="pdfContainer"></div>
		<script
			src="/node_modules/pspdfkit/dist/pspdfkit.js"
			type="text/javascript"
		></script>
		<script type="text/javascript">
			document.addEventListener("change", function (event) {
				if (event.target.files.length === 1) {
					const documentFileObjectUrl = URL.createObjectURL(event.target.files[0]);
					PSPDFKit.load({
						container: "#pdfContainer",
						document: documentFileObjectUrl,
						initialViewState: new PSPDFKit.ViewState({
							pageIndex: 2,
							sidebarMode: PSPDFKit.SidebarMode.THUMBNAILS
						})
					})
						.then(instance => {
							// Make sure to revoke the object URL so the browser doesn't hold on to the file object that's not needed any more.
							URL.revokeObjectURL(documentFileObjectUrl);
						});
				}
			});
		</script>
	</body>
</html>

Loading options

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

PSPDFKit.load() also accepts different configuration options:

Example:

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

In standalone mode, sometimes you’ll want to keep a document persisted in the browser’s local storage. Since local storage only accepts data as a string, you can use Base64 to encode and decode the document storing it.

First export the document as an ArrayBuffer, and then store it as a Base64 string:

const myDocumentArrayBuffer = await instance.exportPDF();
let base64EncodedDocument = '';
const len = myDocumentArrayBuffer.byteLength;
for (let i = 0; i < len; i++) {
	base64EncodedDocument += String.fromCharCode(myDocumentArrayBuffer[i]);
}
window.localStorage.setItem('document', base64EncodedDocument);

You can load this document later by retrieving the Base64 string from local storage and passing it as a data URL in the configuration object passed to PSPDFKit.load():

const base64EncodedDocument = window.localStorage.getItem('document');
PSPDFKit.load({
	// `base64Decode` is a user function that decodes a Base64 string into an `ArrayBuffer`.
	document: `data:application/pdf;base64,${base64EncodedDocument}`
});

Now what if, instead of opening the document from local storage, you want to let the user select a file from the local file system?

Since uploaded files are received as File objects that share the Blob API, you can proceed similarly to how you do with Blob:

// `event` is an HTML change event from an <input type="file"> element.
const documentFileObjectUrl = URL.createObjectURL(event.target.files[0]);
PSPDFKit.load({
	document: documentFileObjectUrl
})
	.then(instance => {
		// Make sure to revoke the object URL so the browser doesn't hold on to the file object that's not needed any more.
		URL.revokeObjectURL(documentFileObjectUrl);
	});

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 2 with the thumbnails sidebar open, do it like this:

// `event` is an HTML change event from an <input type="file"> element.
const documentFileObjectUrl = URL.createObjectURL(event.target.files[0]);
PSPDFKit.load({
	document: documentFileObjectUrl,
    initialViewState: new PSPDFKit.ViewState({
      pageIndex: 2,
      sidebarMode: PSPDFKit.SidebarMode.THUMBNAILS
    })
})
	.then(instance => {
		// Make sure to revoke the object URL so the browser doesn't hold on to the file object that's not needed any more.
		URL.revokeObjectURL(documentFileObjectUrl);
	});

Here’s a complete example that accepts all Standalone-supported input file formats:

<html>
	<head>
		<title>Open local file system PDF</title>
		<style>
			html,
			body {
				height: 100%;
			}
			#pdfContainer {
				height: 90%;
			}
		</style>
	</head>
	<body>
		<input
			type="file"
			accept="application/pdf,image/png,image/jpeg,image/tiff"
		/>
		<div id="pdfContainer"></div>
		<script
			src="/node_modules/pspdfkit/dist/pspdfkit.js"
			type="text/javascript"
		></script>
		<script type="text/javascript">
			document.addEventListener("change", function (event) {
				if (event.target.files.length === 1) {
					const documentFileObjectUrl = URL.createObjectURL(event.target.files[0]);
					PSPDFKit.load({
						container: "#pdfContainer",
						document: documentFileObjectUrl,
						initialViewState: new PSPDFKit.ViewState({
							pageIndex: 2,
							sidebarMode: PSPDFKit.SidebarMode.THUMBNAILS
						})
					})
						.then(instance => {
							// Make sure to revoke the object URL so the browser doesn't hold on to the file object that's not needed any more.
							URL.revokeObjectURL(documentFileObjectUrl);
						});
				}
			});
		</script>
	</body>
</html>

Loading options

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

PSPDFKit.load() also accepts different configuration options:

Example:

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