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