Save PDFs to local storage using JavaScript

Nutrient Web SDK 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 Nutrient Web SDK:

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.