> 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/salesforce/page-manipulation/rotate.md).

# Rotating pages in PDF using JavaScript

Learn how to rotate pages in PDF documents using WebViewer API. Rotate pages in the viewer or in the document data with ease. Find rotation values and functions to manipulate rotations effectively. Sa

Pages in PDF documents may have a "built-in" rotation which is the rotation that the page will be initially displayed at in a viewer. When inside WebViewer a temporary page rotation can also be applied.

Using the WebViewer API it's possible to rotate pages both in the viewer and in the document data. Pages rotated by the user through the rotate buttons in the UI will only apply a temporary rotation.

Rotation values can be found in the [`PageRotation`](https://sdk.apryse.com/api/web/Core.html#.PageRotation__anchor) enum, their name and values are:

| Enum   | Value |
| ------ | ----- |
| E\_0   | 0     |
| E\_90  | 1     |
| E\_180 | 2     |
| E\_270 | 3     |

UI rotation functions can be found on the `DocumentViewer` object. These rotation functions modify what is being displayed in WebViewer, not the actual PDF data.

* [getRotation](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getRotation__anchor): Returns the rotation of a page in the UI
* [getCompleteRotation](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getCompleteRotation__anchor): Returns the total rotation of a page, this is the temporary page rotation plus any permanently built in document rotation
* [setRotation](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#setRotation__anchor): Sets the rotation for the specified page or all pages in WebViewer
* [rotateClockwise](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#rotateClockwise__anchor): Rotates the specified page or all pages clockwise in WebViewer
* [rotateCounterClockwise](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#rotateCounterClockwise__anchor): Rotates the specified page or all pages counterclockwise in WebViewer

There is only one function for manipulating rotation in the actual PDF data and it's found on the [`Document`](https://sdk.apryse.com/api/web/Core.Document.html) object.

* [rotatePages](https://sdk.apryse.com/api/web/Core.Document.html#rotatePages): Rotate an array of pages, this **does** affect the PDF data and the downloaded file. It returns a promise when the operation is complete.

An example of rotations being used can be seen below

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

```js
// config.js
const docViewer = instance.Core.documentViewer;
const rotation = instance.Core.Core.PageRotation;

docViewer.addEventListener('documentLoaded', async () => {
  const doc = docViewer.getDocument();
  const page1 = 1, page2 = 2, page3 = 3;

  // ---- Rotating pages in WebViewer ----------------
  docViewer.rotateClockwise(page1);
  docViewer.getRotation(page1); // returns 1 i.e. PageRotation.E_90
  docViewer.getCompleteRotation(page1); // returns 1 i.e. PageRotation.E_90

  // At this point, page 1 is rotated in WebViewer while page 2 and 3 are not rotated.
  // However if the user downloads the PDF, all pages are NOT rotated.
  // This is because the pages are rotated in the UI but the file data hasn't been changed.

  // ---- Rotating pages in the PDF file data ---------------
  await doc.rotatePages([page1], rotation.E_90);
  // At this point the first page is rotated 180 degrees relative to
  // its orientation originally but if the file is downloaded page 1
  // will only be rotated 90 degrees. This is because it has a 90 degree
  // temporary rotation and a 90 degree built in document rotation

  docViewer.getRotation(page1);
  // 1 i.e. PageRotation.E_90

  docViewer.getCompleteRotation(page1);
  // 2 i.e. PageRotation.E_180, getCompleteRotation returns the total rotation of the page
  // 90 degrees temporary rotation + 90 degrees permanent rotation

  // permanently rotate 180 degrees more
  await doc.rotatePages([page1], rotation.E_180);
  docViewer.getRotation(page1);
  // still return 1 i.e. PageRotation.E_90, the temporary rotation hasn't changed

  docViewer.getCompleteRotation(page1);
  // now returns 0 i.e. PageRotation.E_0, 90 degrees temporary rotation + 270 degrees permanent rotation
});
```

{% endcode %}

[WebViewerInstance](https://sdk.apryse.com/api/web/WebViewerInstance.html) [DocumentViewer.getDocument](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getDocument__anchor) [DocumentViewer.rotateClockwise](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#rotateClockwise__anchor) [DocumentViewer.getRotation](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getRotation__anchor) [DocumentViewer.getCompleteRotation](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getCompleteRotation__anchor) [Document.rotatePages](https://sdk.apryse.com/api/web/Core.Document.html#rotatePages)
{% endtab %}

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

```js
// config.js
const docViewer = instance.docViewer;
const rotation = instance.CoreControls.PageRotation;

docViewer.on('documentLoaded', async () => {
  const doc = docViewer.getDocument();
  const page1 = 1, page2 = 2, page3 = 3;

  // ---- Rotating pages in WebViewer ----------------
  docViewer.rotateClockwise(page1);
  docViewer.getRotation(page1); // returns 1 i.e. PageRotation.E_90
  docViewer.getCompleteRotation(page1); // returns 1 i.e. PageRotation.E_90

  // At this point, page 1 is rotated in WebViewer while page 2 and 3 are not rotated.
  // However if the user downloads the PDF, all pages are NOT rotated.
  // This is because the pages are rotated in the UI but the file data hasn't been changed.

  // ---- Rotating pages in the PDF file data ---------------
  await doc.rotatePages([page1], rotation.E_90);
  // At this point the first page is rotated 180 degrees relative to
  // its orientation originally but if the file is downloaded page 1
  // will only be rotated 90 degrees. This is because it has a 90 degree
  // temporary rotation and a 90 degree built in document rotation

  docViewer.getRotation(page1);
  // 1 i.e. PageRotation.E_90

  docViewer.getCompleteRotation(page1);
  // 2 i.e. PageRotation.E_180, getCompleteRotation returns the total rotation of the page
  // 90 degrees temporary rotation + 90 degrees permanent rotation

  // permanently rotate 180 degrees more
  await doc.rotatePages([page1], rotation.E_180);
  docViewer.getRotation(page1);
  // still return 1 i.e. PageRotation.E_90, the temporary rotation hasn't changed

  docViewer.getCompleteRotation(page1);
  // now returns 0 i.e. PageRotation.E_0, 90 degrees temporary rotation + 270 degrees permanent rotation
});
```

{% endcode %}

[WebViewerInstance](https://sdk.apryse.com/api/web/WebViewerInstance.html) [DocumentViewer.getDocument](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getDocument__anchor) [DocumentViewer.rotateClockwise](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#rotateClockwise__anchor) [DocumentViewer.getRotation](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getRotation__anchor) [DocumentViewer.getCompleteRotation](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getCompleteRotation__anchor) [Document.rotatePages](https://sdk.apryse.com/api/web/Core.Document.html#rotatePages)
{% endtab %}

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

```js
// config.js
const docViewer = instance.docViewer;
const rotation = instance.CoreControls.PageRotation;

docViewer.on('documentLoaded', async () => {
  const doc = docViewer.getDocument();
  const page1 = 1, page2 = 2, page3 = 3;

  // ---- Rotating pages in WebViewer ----------------
  docViewer.rotateClockwise(page1);
  docViewer.getRotation(page1); // returns 1 i.e. PageRotation.e_90
  docViewer.getCompleteRotation(page1); // returns 1 i.e. PageRotation.e_90

  // At this point, page 1 is rotated in WebViewer while page 2 and 3 are not rotated.
  // However if the user downloads the PDF, all pages are NOT rotated.
  // This is because the pages are rotated in the UI but the file data hasn't been changed.

  // ---- Rotating pages in the PDF file data ---------------
  await doc.rotatePages([page1], rotation.e_90);
  // At this point the first page is rotated 180 degrees relative to
  // its orientation originally but if the file is downloaded page 1
  // will only be rotated 90 degrees. This is because it has a 90 degree
  // temporary rotation and a 90 degree built in document rotation

  docViewer.getRotation(page1);
  // 1 i.e. PageRotation.e_90

  docViewer.getCompleteRotation(page1);
  // 2 i.e. PageRotation.e_180, getCompleteRotation returns the total rotation of the page
  // 90 degrees temporary rotation + 90 degrees permanent rotation

  // permanently rotate 180 degrees more
  await doc.rotatePages([page1], rotation.e_180);
  docViewer.getRotation(page1);
  // still return 1 i.e. PageRotation.e_90, the temporary rotation hasn't changed

  docViewer.getCompleteRotation(page1);
  // now returns 0 i.e. PageRotation.e_0, 90 degrees temporary rotation + 270 degrees permanent rotation
});
```

{% endcode %}

[WebViewerInstance](https://sdk.apryse.com/api/web/WebViewerInstance.html) [DocumentViewer.getDocument](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getDocument__anchor) [DocumentViewer.rotateClockwise](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#rotateClockwise__anchor) [DocumentViewer.getRotation](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getRotation__anchor) [DocumentViewer.getCompleteRotation](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getCompleteRotation__anchor) [Document.rotatePages](https://sdk.apryse.com/api/web/Core.Document.html#rotatePages)
{% 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 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/salesforce/page-manipulation/rotate.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.