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 and the browser print function is triggered. This allows the native PDF printing capabilities of browsers like Chrome, Safari, and Firefox to be utilized. Since embedded printing embeds the actual PDF content this ensures that high quality text and graphics are preserved when printing to physical paper or printing as a PDF.

When using embedded printing the grayscale and "include comments" options require the full API to be enabled.

You can enable it using the useEmbeddedPrint API

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

If you encounter quality or performance issues, an alternative approach is to open the PDF in a new browser tab when the user presses print. You can embed an auto-print action in the PDF along with the annotation on your server and generate a link to that PDF to be opened in a new tab. This is actually the approach used by WebViewer Server and is similar to the embedded print method described above.

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.

This print output is the default behavior when using WebViewer Server. However, you can disable this by calling useClientSidePrint. This option allows you to utilize rasterized or embedded custom print features, such as including annotations or printing the document in grayscale.

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