How to rotate individual pages of pdf and safe the rotation in database so that next time a user opens that pdf they get the pages with the saved rotation

Technical Support
, , ,
1

Product: WebViewer

Product Version: 8.0.1

Please give a brief summary of your issue:
(Think of this as an email subject)
I want to save the rotation state of individual pages of a pdf and preserve this rotation to show the pdf pages in same rotated state next time the user opens the pdf

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)
When a user open a pdf in webViewer and rotates individual pages and goes back and reopen the rotation of previous rotated pages are lost and I want to preserve the rotation of individual pages so that user get to see the pages in same rotated state that he rotated the last time while going through the pdf.
For this i want to save the page number and rotation of that page in my database and a user can rotate any number of pages so I want to know how can I keep the information of a particular page with it’s rotation state .

Currently I am able to preserve the rotation of whole pdf

image
image1197×1016 163 KB

I want to rotate individual pages and save their roation state in database

image
image1038×847 124 KB

Here is my current code:

image
image1077×378 24.8 KB

Please provide a link to a minimal sample where the issue is reproducible:
Here is the url of pdf: https://slate-dev-blob.s3.amazonaws.com/tenant/6/project/2365/feature/5/193623f6-9871-420a-9cbd-bd3719765280.pdf?AWSAccessKeyId=AKIAQK4RE22TAD32KED6&Expires=1662017819&Signature=zeG4f%2BMQEcePjw6A3HyzxbxPq1E%3D&response-content-disposition=attachment%3B%20filename%3Dpagee7a55417-87bc-447e-a9be-f5c672fdbd4e_Hennepin%2520County%2520Medina%2520Public%2520Works%2520Facility%2520Welding%2520Shop%2520Expansion%2520drawings%2520(1)%2520(1).pdf

2

Hello there,

In WebViewer 8.0 you would need to enable the left panel by default when the document is loaded, and then use event delegation on left panel to watch for button clicks on the single page rotation buttons.

const { documentViewer } = instance.Core
documentViewer.addEventListener('documentLoaded',()=>{
  let panelElement = instance.docViewer.getScrollViewElement().closest('#app').querySelector('[data-element="thumbnailsPanel"]');
  if (!parentElement) {
    instance.UI.toggleElementVisibility('leftPanel');
    panelElement = instance.docViewer.getScrollViewElement().closest('#app').querySelector('[data-element="thumbnailsPanel"]');
  }
  panelElement.addEventListener('click', (e) => {
    if (e.target.dataset?.element === 'thumbRotateClockwise' || e.target.dataset?.element === 'thumbRotateCounterClockwise') {
      // The single page rotations are performed asychronously and there are no events firings in 8.0, so we have to manually add a delay before the page finishes rotating itself.
      setTimeout(() => {
        const pageNumber = parseInt(e.target.parentElement.previousSibling.textContent);
        const rotation = instance.docViewer.getDocument().getPageRotation(pageNumber);
        console.log('page ', pageNumber, ' self rotation is ', rotation);
      }, 500);
    }
  });
})

If you have the option to upgrade to the latest WebViewer, you can listen to the ‘pagesUpdated’ event on documentViewer and the code becomes shorter & cleaner:

const { documentViewer } = instance.Core
documentViewer.addEventListener('pagesUpdated',(changes)=>{
    changes.contentChanged.forEach(pageNumber=>{
        const rotation = documentViewer.getDocument().getPageRotation(pageNumber)
        console.log('page ', pageNumber, ' self rotation is ', rotation);
    })
})

For both situations, when you load the document back, you can use documentViewer.getDocument().rotatePages to rotate to your saved rotations.

assuming we have the saved page rotations data structured like this

const rotationData = [
  {pageNumber: 1, rotation: 180},
  {pageNumber: 3, rotation: 90},
  {pageNumber: 4, rotation: 270},
]

We can use the following code to rotate our individual pages back:

const { documentViewer } = instance.Core
documentViewer.addEventListener('documentLoaded',()=>{
  rotationData.forEach(page=>{
    const originalRotation = documentViewer.getDocument().getPageRotation(page.pageNumber)
    if (originalRotation !== page.rotation) {
      documentViewer.getDocument().rotatePages([page.pageNumber], (page.rotation-originalRotation)/90);
    }
  })
})
1 Like