Disable page DropShadow

Technical Support
1

Which product are you using?
PDF.js Express Viewer

PDF.js Express Version

UI version ‘8.7.0’
Core version ‘8.7.1’
webviewer.min.js ‘8.7.1’
Build ‘MS8yMC8yMDIzfGIzYTExOTI2Yw==’
WebViewer Server false
Full API false

Detailed description of issue
I want to disable the drop shadow of the pages programatically, therefore I can not hardcode it using CSS.
I tried the following method:


      instance.Core.documentViewer.addEventListener('documentLoaded', () => {
          const $pages = iframeDoc.querySelectorAll<HTMLElement>('.pageContainer')
          $pages.forEach($page => {
            $page.style.setProperty('box-shadow', 'none')
            $page.style.setProperty('background-color', 'none')
          })

but unfortunately this only works on the first page. the other pages still have the shadow. Is there any event that gets fired when a page is loaded so I can rerun the script? I could not find it. Is there any other preferred way of disabling the dropshadow?

Expected behaviour
Disable dropshadow of pages

Does your issue happen with every document, or just one?
every

Code snippet


      instance.Core.documentViewer.addEventListener('documentLoaded', () => {
          const $pages = iframeDoc.querySelectorAll<HTMLElement>('.pageContainer')
          $pages.forEach($page => {
            $page.style.setProperty('box-shadow', 'none')
            $page.style.setProperty('background-color', 'none')
          })
3

Hello Maximilian.beck,

Try using:

const pages = document.querySelectorAll('.pageContainer')

This worked for me on the demo page.

Best regards,
Tyler Gordon

4

Hi Tyler,

Thanks for your reply. I may have multiple pdfs on one page, where I only want to hide the shadow on some of them, therefore I need to work on the specific iFrame.
Any idea on how to achieve that?

5

Hello Maximillian.beck,

If you wanted to fully customize how the pages are rendered you could listen to the pageComplete event which returns the canvas of the page being rendered.

However you could also just filter the list of pages from

const pages = document.querySelectorAll('.pageContainer')

with

const filteredPages = pages.filter((page)=>{
    return page.id === 'pageContainer6' || page.id === 'pageContainer7'
})