Rotating pages in PDF using JavaScript

Requirements

These packages are required to use these features in production. Trial keys have unlimited access to all features

Package: Page ManipulationLive demo

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

JavaScript (SDK v8.0+)

WebViewer(...)
  .then(instance => {
    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
    });
  });

WebViewerInstance DocumentViewer.getDocument DocumentViewer.rotateClockwise DocumentViewer.getRotation DocumentViewer.getCompleteRotation Document.rotatePages

JavaScript (SDK v7.0+)

WebViewer(...)
  .then(instance => {
    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
    });
  });

WebViewerInstance DocumentViewer.getDocument DocumentViewer.rotateClockwise DocumentViewer.getRotation DocumentViewer.getCompleteRotation Document.rotatePages

JavaScript (SDK v6.0+)

WebViewer(...)
  .then(instance => {
    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
    });
  });

WebViewerInstance DocumentViewer.getDocument DocumentViewer.rotateClockwise DocumentViewer.getRotation DocumentViewer.getCompleteRotation Document.rotatePages