Customize the Print Button (Hide/Enable) in Our JavaScript PDF Viewer

The print button is a toolbar button that allows users to print a PDF document displayed in our SDK. This guide covers both how to add additional custom buttons to abort printing, and how to customize the built-in printing button options.

Launch Demo

In addition to using the standard print button from the main toolbar, printing can be managed programmatically via the API.

We support two instance methods for starting and aborting a print task:

• instance.print()

• instance.abortPrint()

For example, if you want to add a custom toolbar that would abort printing when clicked, you could do this the following way:

const item = {
  type: "custom",
  id: "abort-print",
  title: "Abort Printing",
  onPress: (event) => {
    instance.abortPrint();
  }
};

instance.setToolbarItems((items) => items.concat([item]));

Note that abortPrint is only available for the PSPDFKit.PrintMode.DOM mode.

Print Modes

Our current solution supports two print options, so you can make the tradeoff that’s right for your use case.

Choosing a Print Mode

The available modes are:

• PSPDFKit.PrintMode.DOM

• PSPDFKit.PrintMode.EXPORT_PDF

It’s possible to configure the printMode via the initial configuration:

PSPDFKit.load({
  printMode: PSPDFKit.PrintMode.EXPORT_PDF
});

It’s also possible to enforce a print mode when printing programmatically via the API:

instance.print(PSPDFKit.PrintMode.EXPORT_PDF);

PSPDFKit.PrintMode.DOM

PSPDFKit.PrintMode.DOM is the default print mode for PSPDFKit for Web because of its reliability and cross-browser support. This method will render all pages of a PDF document in advance before it sends the results to the printer. It’s in all major browsers and won’t give your users access to the source PDF file. However, it’s CPU bound and memory usage scales with PDF size.

PSPDFKit.PrintMode.EXPORT_PDF

PSPDFKit.PrintMode.EXPORT_PDF is resource efficient and lets you avoid having to render every page in advance, which could balloon memory usage to multiple GBs on PDFs with more than 100 pages.

Google Chrome and Microsoft Internet Explorer provide the APIs required to use the native renderer; meanwhile, as a fallback on other browsers, we generate and open a PDF in a new tab. This allows users to print the PDF in a native PDF reader which can, in contrast to browser-built implementations, talk directly to the connected printer. A drawback of this approach is that it might give users access to the source files.

Below is an overview of all supported browsers and their behaviors.

• Google Chrome: This browser is fully supported. Printing a PDF page will use the native renderer that’s part of the Chrome browser.

• Internet Explorer 11: This browser is partially supported. To support printing, the Windows Media Feature Pack must be installed, which is the case on 99 percent of all Windows installations, unless you use the N or KN editions. If the Windows Media Feature Pack is installed, the browser will ask you to install the Adobe Reader PDF extension upon first use. With this extension enabled, printing works as expected and without opening a new tab.

Internet Explorer 11 is no longer supported in our Web SDK as of version 2022.5. Edge 18 is no longer supported in our Web SDK as of version 2023.2.

• Microsoft Edge: This browser opens a new tab and uses the built-in WinRT PDF Renderer (Windows.Data.Pdf) library. Edge no longer supports ActiveX and thus doesn’t support third-party plugins such as Adobe Reader.

• Apple Safari: This browser opens a new tab, which loads either Apple’s Preview PDF renderer or the Adobe Reader plugin, if installed.

• Mozilla Firefox: This browser opens a new tab, which renders the PDF via Mozilla’s JavaScript PDF renderer, albeit slowly.

Check out our API Reference for more information.

Enabling Printing

The printing toolbar item is enabled by default when the download permission is granted in the JSON Web Token (JWT) used for authentication. This permission is required so that the client can access the raw PDF document needed. The printing toolbar item is always enabled by default.

Enabling and Disabling Printing via the JavaScript API

It’s possible to enable or disable printing via our JavaScript API, which allows you to toggle the PSPDFKit.ViewState.allowPrinting Boolean.

Below is an example of how to disable printing:

instance.setViewState((state) => state.set("allowPrinting", false));

The button will be marked as disabled in the main toolbar. Please refer to the toolbar API to find out how to remove the print button when it’s disabled.

Hiding the Print Button

You can remove the print 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` "print" by removing it from the array of items.
instance.setToolbarItems(items.filter((item) => item.type !== "print"));