About Customizing Button position(2)

Technical Support
1

PDF.js Express Viewer(8.4.0)

Hi, I supplemented the link topic below and rewrite it.
https://pdfjs.community/t/about-customizing-button-position/1598

Can the ‘Next Page’ and ‘Previous Page’ buttons be centered on both sides of the document?
If I can, how can I do it?

image

3

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

4

Hey there,

We do not have an API for this, but you have a few options still:

  1. Our UI is open source, so you could go in and move/add the buttons yourself. Here is a guide on using our open source UI.

  2. You could overlay your own buttons over the viewer and use the setCurrentPage API to trigger the page change. Here’s an example:

  const nextButton = document.createElement('button')
  nextButton.innerHTML = "Next"
  nextButton.style.position = 'absolute'
  nextButton.style.top = '50%'
  nextButton.style.right = '0'
  nextButton.style.zIndex = '9999'
  nextButton.onclick = () => {
    instance.Core.documentViewer.setCurrentPage(
      instance.Core.documentViewer.getCurrentPage() + 1
    )
  }
  const container = instance.UI.iframeWindow.document.querySelector('.DocumentContainer')
  container.appendChild(nextButton)

Thanks!
Logan

1 Like