> 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 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/salesforce/page-manipulation/rotate.md?ask=&goal= ``` `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.