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])
});

Hiding the Download Button

You can remove the download button from the toolbar by getting the array of current toolbar items via instance.toolbaritems and then filtering it and setting the new array:

const items = instance.toolbarItems;
// Hide the toolbar item with the type "export-pdf" by removing it from the array of items.
instance.setToolbarItems(
  items.filter((item) => item.type !== "export-pdf")
);