Customize the print button in our JavaScript PDF viewer

Use the print button to print the PDF document shown in Nutrient Web SDK. You can also add custom buttons, abort printing, choose a print mode, and hide the built-in print button.

Start or abort printing

Use these instance methods to start or abort a print task:

• instance.print()
• instance.abortPrint()

Add a custom toolbar item when you need a button that aborts printing:

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

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

abortPrint is available only for NutrientViewer.PrintMode.DOM.

Print modes

Nutrient Web SDK supports two print modes:

• NutrientViewer.PrintMode.DOM
• NutrientViewer.PrintMode.EXPORT_PDF

Set the default mode with printOptions.mode in the initial configuration:

NutrientViewer.load({
  printOptions: {
    mode: NutrientViewer.PrintMode.EXPORT_PDF,
  },
}).catch((error) => {
  console.error("Failed to load document:", error.message);
});

You can also pass a print mode when you print with the API:

instance.print({
  mode: NutrientViewer.PrintMode.EXPORT_PDF,
});

NutrientViewer.PrintMode.DOM

NutrientViewer.PrintMode.DOM is the default print mode for Nutrient Web SDK because of its reliability and cross-browser support. It renders all PDF pages before it sends them to the printer. Major browsers support this mode. It doesn’t expose the source PDF file to users.

However, this mode is CPU bound, and memory usage scales with PDF size. On PDFs with more than 100 pages, it could balloon to multiple GBs.

NutrientViewer.PrintMode.EXPORT_PDF

NutrientViewer.PrintMode.EXPORT_PDF is resource efficient, and it enables you to avoid rendering every page in advance.

Depending on browser capabilities, this mode either prints the generated PDF from a hidden iframe or opens it in a new tab. The new tab enables users to print with a native PDF reader, but it exposes the source file.

These browsers handle NutrientViewer.PrintMode.EXPORT_PDF differently:

• Chromium-based browsers, such as Google Chrome and Microsoft Edge, on macOS, Windows, and Linux — The PDF loads in a hidden iframe and prints directly, without a new tab.
• WebKit browsers, such as Apple Safari, on macOS and iOS — The PDF loads in a hidden iframe and prints directly, without a new tab.
• Mozilla Firefox — The PDF opens in a new tab. Firefox renders it with its own JavaScript PDF renderer, albeit slowly.
• Android browsers — The PDF opens in a new tab for printing.

Password-protected documents always open in a new tab.

For more information, refer to the API reference.

Enable printing

The printing toolbar item is enabled by default. With Document Engine, it’s enabled only when the JSON Web Token (JWT) used for authentication grants the download permission. The client needs that permission to access the raw PDF document.

Enable and disable printing with the JavaScript API

Toggle the NutrientViewer.ViewState.allowPrinting Boolean to enable or disable printing.

Use this code to disable printing:

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

Nutrient Web SDK marks the button as disabled in the main toolbar. To remove the print button when it’s disabled, refer to the toolbar API.

Replace the print button

The built-in print button uses the default print options. It doesn’t wait for custom print code before printing.

Replace the print button if you need custom behavior, such as printing without annotations. Add a custom toolbar item that calls instance.print() with your print options.

Refer to the prevent printing PDF annotations guide for an example that excludes annotations while preserving form field values.

Hide the print button

Remove the print button from the toolbar by filtering instance.toolbarItems. Then set the filtered 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"));