Section:

Rotating pages in PDF using JavaScript

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 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: Returns the rotation of a page in the UI
  • getCompleteRotation: Returns the total rotation of a page, this is the temporary page rotation plus any permanently built in document rotation
  • setRotation: Sets the rotation for the specified page or all pages in WebViewer
  • rotateClockwise: Rotates the specified page or all pages clockwise in WebViewer
  • rotateCounterClockwise: 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 object.

  • 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

1WebViewer(...)
2  .then(instance => {
3    const docViewer = instance.Core.documentViewer;
4    const rotation = instance.Core.Core.PageRotation;
5
6    docViewer.addEventListener('documentLoaded', async () => {
7      const doc = docViewer.getDocument();
8      const page1 = 1, page2 = 2, page3 = 3;
9
10      // ---- Rotating pages in WebViewer ----------------
11      docViewer.rotateClockwise(page1);
12      docViewer.getRotation(page1); // returns 1 i.e. PageRotation.E_90
13      docViewer.getCompleteRotation(page1); // returns 1 i.e. PageRotation.E_90
14
15      // At this point, page 1 is rotated in WebViewer while page 2 and 3 are not rotated.
16      // However if the user downloads the PDF, all pages are NOT rotated.
17      // This is because the pages are rotated in the UI but the file data hasn't been changed.
18
19      // ---- Rotating pages in the PDF file data ---------------
20      await doc.rotatePages([page1], rotation.E_90);
21      // At this point the first page is rotated 180 degrees relative to
22      // its orientation originally but if the file is downloaded page 1
23      // will only be rotated 90 degrees. This is because it has a 90 degree
24      // temporary rotation and a 90 degree built in document rotation
25
26      docViewer.getRotation(page1);
27      // 1 i.e. PageRotation.E_90
28
29      docViewer.getCompleteRotation(page1);
30      // 2 i.e. PageRotation.E_180, getCompleteRotation returns the total rotation of the page
31      // 90 degrees temporary rotation + 90 degrees permanent rotation
32
33      // permanently rotate 180 degrees more
34      await doc.rotatePages([page1], rotation.E_180);
35      docViewer.getRotation(page1);
36      // still return 1 i.e. PageRotation.E_90, the temporary rotation hasn't changed
37
38      docViewer.getCompleteRotation(page1);
39      // now returns 0 i.e. PageRotation.E_0, 90 degrees temporary rotation + 270 degrees permanent rotation
40    });
41  });

Related Links

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales