Printing a document with JavaScript

WebViewer allows users to print the currently viewed document and also provides APIs to trigger printing programmatically.

You can customize the CSS for the print modal just like any other UI component

For more advanced customizations you can modify the component directly .

Look for the PrintModal component in the WebViewer UI repository.

To display the print dialog programmatically you can use the instance.print API.

WebViewer(...)
  .then(function(instance) {
    var docViewer = instance.Core.documentViewer;

    // you must have a document loaded when calling this api
    docViewer.addEventListener('documentLoaded', function() {
      instance.UI.print();
    });
  });

Browsers don't have an API to directly access the printer. Instead WebViewer will render each page and place it in the DOM so that the pages are visible for printing. This means that WebViewer needs to choose a resolution to render each page. If the resolution isn't high enough then the pages may appear blurry.

The setPrintQuality API allows you to increase the resolution of the rendered pages. Note that higher values will also take longer to complete because each page needs to be rendered at a higher quality.

The recommended values are 2 to 5. 2 or 3 is suitable for most purposes. Values higher than 5 will have diminishing returns in terms of increasing quality. Note that it has no effect on the printed document quality if using embedded printing.

WebViewer(...)
  .then(function(instance) {
    instance.UI.setPrintQuality(2);
  });

WebViewer supports another mode of printing called "embedded printing" where the PDF will embedded in the page with an auto-print action that will automatically trigger printing. This approach can be enabled in Chrome and allows the native PDF printing to be used.

This has a few benefits over the default printing:

• There is no intermediate dialog in WebViewer, it will jump straight to the browser print dialog
• It will be also faster and use less memory because it doesn't need to render every page in JavaScript

However there are a few downsides:

• It only works reliably in Chrome
• Custom annotations that aren't part of the PDF specification will not be visible

You can enable it using the useEmbeddedPrint API

WebViewer(...)
  .then(function(instance) {
    instance.UI.useEmbeddedPrint(true);
  });

If you are running into quality or performance issues, an alternative approach that can be used is to open the PDF in a new browser tab when they press print. On your server you could embed an auto-print action in the PDF along with the annotations and generate a link to that PDF that would be opened in the new tab. This is actually the approach used by WebViewer Server .

This will open the PDF in the native browser PDF viewer and if supported by the viewer the print dialog will immediately appear. For browsers that don't support auto-print, the user can click the print button. This is the same approach used by Gmail when printing PDFs.

The benefit is that you're not constrained by JavaScript processing or memory, allowing the printing to start quickly and at high quality. The downside is that depending on the browser the user may need to press the print button a second time in the new tab.