Customizing Download/Export Buttons in Our JavaScript PDF Viewer

The built-in download button can be activated using instance.setToolbarItems():

instance.setToolbarItems(items => items.concat([{ type: "export-pdf" }]));

Or, if you prefer, you can also set it in the PSPDFKit.Configuration object passed to PSPDFKit.load():

PSPDFKit.load({
	toolbarItems: PSPDFKit.defaultToolbarItems.concat([{ type: "export-pdf" }])
})

If you need more fine-grained control over the download operation, with instance.exportPDF() and the possibility of customizing the toolbar, you can easily add your own download button to PSPDFKit for Web:

const downloadButton = {
  type: "custom",
  id: "download-pdf",
  icon: "/download.svg",
  title: "Download",
  onPress: () => {
    pspdfkitInstance.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 = window.URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = objectUrl;
        a.style = "display: none";
        a.download = fileName;
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(objectUrl);
        document.body.removeChild(a);
      }
    });
  }
};

PSPDFKit.load({
  toolbarItems: PSPDFKit.defaultToolbarItems.concat([downloadButton])
});