Save PDFs to Local Storage Using JavaScript

PSPDFKit for Web makes it possible to save an open document locally without a server.

This can be done programmatically by exporting the document to an ArrayBuffer via Instance#exportPDF() and triggering a download.

For example, here we’ll customize the toolbar to add a download button to PSPDFKit for Web:

let instance;
const downloadButton = {
	type: "custom",
	id: "download-pdf",
	icon: "/download.svg",
	title: "Download",
	onPress: () => {
		instance.exportPDF().then((buffer) => {
			const blob = new Blob([buffer], { type: "application/pdf" });
			const fileName = "document.pdf";
			if (window.navigator.msSaveOrOpenBlob) {
				window.navigator.msSaveOrOpenBlob(blob, fileName);
			} else {
				const objectUrl = URL.createObjectURL(blob);
				const a = document.createElement("a");
				a.href = objectUrl;
				a.style = "display: none";
				a.download = fileName;
				document.body.appendChild(a);
				a.click();
				URL.revokeObjectURL(objectUrl);
				document.body.removeChild(a);
			}
		});
	}
};

const items = PSPDFKit.defaultToolbarItems;
// Add the download button to the toolbar.
items.push(downloadButton);

PSPDFKit.load({
	toolbarItems: items
})
	.then((_instance) => {
		instance = _instance;
	});

When exporting a document, you have several options. Refer to our guides on flattening annotations and incremental saving for more details.

Auto saving can be configured for different scenarios and use cases. You can find more information in our auto save guide.