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

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

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

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

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales

Product:

Product:

Rotating pages in PDF using JavaScript

Product:

Product:

Rotating pages in PDF using JavaScript

Related Links

Related Links

Related Links