> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/print/overview.md).

# Print a Document with JavaScript

Learn how to print a document with JavaScript using WebViewer. Explore options for printing programmatically or through the UI print modal. Customize the print modal's CSS and quality settings for opt

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

## UI

### WebViewer's print modal

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-a883b34a8805be47620c31202814d992919b71d2%2F7152c53dc2103def2aceb71fe3abdb175c9cc718-484x592.png?alt=media)

### To access it in the UI

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-b60046fb53bb735b28e4e73522e3c33e6531651c%2F71f2964b2fca20a324f43bf02da358b8447d2a0d-420x290.gif?alt=media)

### Customizing the print modal

You can customize the CSS for the print modal just [like any other UI component](/web/ui-customization/customizing-styles.md#changing-css-properties)

For more advanced customizations you can [modify the component directly](/web/ui-customization/advanced-customization.md).

Look for the PrintModal component in the [WebViewer UI repository](https://github.com/ApryseSDK/webviewer-ui/).

## Programmatically

To display the print dialog programmatically you can use the [instance.print](https://sdk.apryse.com/api/web/UI.html#.print__anchor) API.

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}

```js
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();
    });
  });
```

{% endcode %}

[WebViewerInstance](https://sdk.apryse.com/api/web/WebViewerInstance.html) [DocumentViewer#documentLoaded](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#event:documentLoaded__anchor)
{% endtab %}

{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}

```js
WebViewer(...)
  .then(function(instance) {
    var docViewer = instance.docViewer;

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

{% endcode %}

[WebViewerInstance](https://sdk.apryse.com/api/web/WebViewerInstance.html) [DocumentViewer#documentLoaded](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#event:documentLoaded__anchor)
{% endtab %}
{% endtabs %}

## Setting print quality

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](https://sdk.apryse.com/api/web/UI.html#.setPrintQuality__anchor) 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](#embedded-printing).

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}

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

{% endcode %}

[UI.setPrintQuality](https://sdk.apryse.com/api/web/UI.html#setPrintQuality__anchor)
{% endtab %}

{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}

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

{% endcode %}

[WebViewerInstance.setPrintQuality](https://sdk.apryse.com/api/web/UI.html#setPrintQuality__anchor)
{% endtab %}
{% endtabs %}

## Embedded printing

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.

|                       | Rasterized (default)                                           | Embedded                                            |
| --------------------- | -------------------------------------------------------------- | --------------------------------------------------- |
| Quality               | Converting text and images into a raster format (pixels)       | Preserves the original font and graphic information |
| Speed and memory      | Needs to render every page in JavaScript                       | Doesn't need to render pages                        |
| Maintenance           | `html2canvas` controls the final output of form field printing | Printing flow is entirely run using our own API     |
| Browser Support       | All                                                            | Everything except Android Chrome                    |
| Save as PDF file name | Retains the original file name                                 | Does not retain the original file name              |

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

{% hint style="info" %}
When selecting the option to Save as PDF from the embedded print modal, the original file name will be lost due to browser API limitations. Consider downloading the PDF instead.
{% endhint %}

### WebViewer's Embedded print modal

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-6cdfa9b8775cd0de1e8dcb51d850ec0ba365bb80%2Fde3a001a1a6bcfc9a5b3fb94161e43606a729dfe-486x497.png?alt=media)

You can enable it using the [useEmbeddedPrint API](https://sdk.apryse.com/api/web/UI.html#.useEmbeddedPrint__anchor)

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}

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

{% endcode %}

[WebViewerInstance.UI.useEmbeddedPrint](https://sdk.apryse.com/api/web/UI.html#useEmbeddedPrint__anchor)
{% endtab %}

{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}

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

{% endcode %}

[WebViewerInstance.useEmbeddedPrint](https://sdk.apryse.com/api/web/UI.html#useEmbeddedPrint__anchor)
{% endtab %}
{% endtabs %}

## Alternative Printing Methods

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](/web/get-started/faq/what-is-wvs.md) 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.

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

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

{% endcode %}
{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.apryse.com/web/print/overview.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.