How to rotate single page in whole pdf using pdfjs?

Question

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

Answer 1

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 comes 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.

Answer 2

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 .