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 you’ll customize the toolbar to add a download button to Nutrient Web SDK (try it in the Playground(opens in a new tab)):

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";
        // Legacy IE11 support — remove if IE11 is not required.
        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);
        }
      })
      .catch((error) => {
        console.error("Failed to export PDF:", error.message);
      });
  }
};


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


NutrientViewer.load({
  toolbarItems: items
})
  .then((_instance) => {
    instance = _instance;
  })
  .catch((error) => {
    console.error("Failed to load document:", error.message);
  });

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.