> 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/documentviewer/working-with-documents.md).

# Working with documents using the Document Viewer

Discover how to work with documents using the Document Viewer object. Learn about common APIs for tasks like getting page information, starting text searches, and more. Dive into functions like getDoc

Whereas the [WebViewer instance](/web/what-is-webviewer/usage.md) is the entry point to the WebViewer SDK, the [DocumentViewer](https://sdk.apryse.com/api/web/Core.DocumentViewer.html) is the main object responsible for the interaction with the viewing of a loaded document. The main APIs and events are focused around the viewing of the document.

In this guide, we will show you some common APIs that work with the document through the use of the DocumentViewer object. You can then apply these to get page information for a printing process or programmatically starting a text search for key terms.

## Getting the loaded document

To get a [`Document`](https://sdk.apryse.com/api/web/Core.Document.html) object representing the currently loaded document, the DocumentViewer provides the [`getDocument`](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getDocument) function. With the document object, you can interact directly with the document.

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

```js
documentViewer.addEventListener('documentLoaded', () => {
  const doc = documentViewer.getDocument();
  doc.rotatePages([1], Core.PageRotation.E_90);
});
```

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

[DocumentViewer.getDocument](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getSelectedTextQuads__anchor) [Document.rotatePages](https://sdk.apryse.com/api/web/Core.Document.html#rotatePages)

## Reading the page count

To read the number of pages of a loaded document, the DocumentViewer provides a [`getPageCount`](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getPageCount__anchor) function. This is often used in for loops to loop through pages. This API is also availble on the [`Document`](https://sdk.apryse.com/api/web/Core.Document.html) class.

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

```js
documentViewer.addEventListener('documentLoaded', () => {
  const pageCount = documentViewer.getPageCount();
  for (let i = 1; i <= pageCount; i++) {
    // Call other APIs
    const viewingRotation = documentViewer.getRotation(i);
    console.log(viewingRotation);
  }
});
```

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

[DocumentViewer.getPageCount](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getPageCount__anchor) [DocumentViewer.getRotation](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getRotation__anchor)

## Getting the current page number

When scrolling or changing pages is available to a user, you can check which page they are on using the [`getCurrentPage`](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getCurrentPage__anchor) DocumentViewer API. The current page number may also be necessary when calling other APIs like [`rotatePages`](https://sdk.apryse.com/api/web/Core.Document.html#rotatePages) to rotate the current page.

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

```js
documentViewer.addEventListener('documentLoaded', () => {
  const currentPageNum = documentViewer.getCurrentPage(); // 1-indexed
});
```

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

[DocumentViewer.getCurrentPage](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getCurrentPage__anchor)

## Changing pages

When scrolling or changing pages is available to a user, you can change the page that the user is on programmatically. This could be in response to clicking a button or perhaps going back to where a user last left off. This is done using the [`setCurrentPage`](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#setCurrentPage__anchor) API.

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

```js
documentViewer.addEventListener('documentLoaded', () => {
  documentViewer.setCurrentPage(3); // Goes to page 3 of the document
});
```

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

[DocumentViewer.setCurrentPage](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#setCurrentPage__anchor)

## Getting text selection

A [`textSelected`](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#event:textSelected) event can be triggered from selecting text but it may be necessary to fetch the selected text outside of this event. This can be done with the [`getSelectedText`](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getSelectedText__anchor) API.

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

```js
function onMyButtonClick() {
  const text = documentViewer.getSelectedText();
  // ...
}
document.getElementById('myBtn').addEventListener('click', onMyButtonClick);
```

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

[DocumentViewer.getSelectedText](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getSelectedText__anchor)

If you need to know the location of the text, then [`getSelectedTextQuads`](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getSelectedTextQuads__anchor) will give you a quad/rectangle representing the location and size of the selection.

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

```js
function onMyButtonClick() {
  const quads = documentViewer.getSelectedTextQuads();
  const pages = Object.keys(quads);
  pages.forEach((pageNum) => {
    const selections = quads[pageNum];
    const rects = selections.map((quad) => new Core.Math.Rect(quad.x4, quad.y4, quad.x2, quad.y2)); // Top-left and bottom-right
    // Use to create annotations
  });
}
document.getElementById('myBtn').addEventListener('click', onMyButtonClick);
```

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

[DocumentViewer.getSelectedText](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getSelectedTextQuads__anchor)

## Next steps

Go deeper with the document APIs by reading on how to get the [file data](/web/open-save-document/save.md#getting-file-data) or [manipulate the document](/web/page-manipulation/manipulation.md) further.


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.apryse.com/web/documentviewer/working-with-documents.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.