i downloaded pdf.js library from mozilla. It works great in opening my pdf files and viewing them. The problem is when I click on the rotate page it rotates ALL the pages instead of just the selected page. I tried googled and read up the manual for pdf.js but can't find related resources on rotating SINGLE pdf page in pdf.js pls help

i downloaded pdf.js library from mozilla. It works great in opening my pdf files and viewing them. The problem is when I click on the rotate page it rotates ALL the pages instead of just the selected page. I tried googled and read up the manual for pdf.js but can't find related resources on rotating SINGLE pdf page in pdf.js pls help

• javascript
• rotation
• pdf.js

2 Answers 2

Depending on how much work you might want to spend and for what purpose you'd like to achieve:

Rotating a single page manually:

apply transform: rotate(90deg) or transform: rotate(-90deg) to the designated page's container element - this can be done in current major browsers by using the builtin developer tools.

I used the builtin viewer that es with Mozilla Firefox - pages are placed within div containers which are identified by the attribute data-page-number.

Rotating a single page programmatically:

function rotateSinglePage(pageNum, degree)
{
  var viewerMain = document.getElementById("viewer");
  var pageContainer = viewerMain.querySelector("div[data-page-number='" + pageNum + "']");
  pageContainer.style.transform = "rotate(" + degree + "deg)";
}

You can call this function either from the browser's developer tools or build your own interface (button / hotkey).

If you'd like to be able to rotate more than once, you can get access to the current rotation using:

function getCurrentRotation(pageNum)
{
  var viewerMain = document.getElementById("viewer");
  var pageContainer = viewerMain.querySelector("div[data-page-number='" + pageNum + "']");
  var rotationStyle = pageContainer.style.transform;

  //try to strip everything but the number
  //we assume number to be integer (without fraction)
  var rotation = rotationStyle.replace(/rotate\(([-]?[0-9]{0,3})deg\)/,"$1");
  var rotationDegree = Number.parseInt(rotation);

  //if parseInt fails, it returns NaN - this happens on empty string as well
  //by default an unrotated page (0 degree) has no transform style, so
  //we return 0 degree in this case
  if (Number.isNaN(rotationDegree)) { rotationDegree = 0; }
  return rotationDegree;
}

As the current page is stored in document.getElementById("pageNumber").value, you can build your interface to rotate the current page.

You could try this script which allow you to rotate all pages incrementally and reset all of them when necessary.

The code add a data attribute rotation on each page DOM element.

    const rotatePages = (deg: number, force: boolean = false) => {
        const pageContainer = document.getElementById('viewer')
        if (pageContainer) {
          const pagesDOM: ReadonlyArray<HTMLDivElement> = Array.from(
            pageContainer.querySelectorAll(`div[data-page-number]`),
          )
          pagesDOM.forEach(pageDOM => {
            const datasetRotation = pageDOM.dataset.rotation
            let targetRotation = deg
            if (datasetRotation) {
              targetRotation = force ? deg : deg + Number(datasetRotation)
            }
            pageDOM.dataset.rotation = String(targetRotation)
            pageDOM.style.transform = `rotate(${targetRotation}deg)`
          })
        }

Use it as:

// incremental rotation    
rotatePages(90) // rotate all pages of 90 deg
rotatePages(90) // rotate all pages of +90 deg (now they are all rotated of 180 deg)

// reset rotation for all pages to 0 degree
rotatePages(0, true) 

If you are interested to get the current rotation of a page, instead of using .replace(/rotate\(([-]?[0-9]{0,3})deg\)/,"$1");

you could simply query the dom for a specific data attribute rotation.