How can we integrate a side layout of all pdf pages on outside of the viewer

Technical Support
1

PDF.js Express Version

Detailed description of issue
can we integrate a side layout of all pdf pages on outside of the viewer. On click of each page, the pdf page inside the viewer should also change. Thanks.

Expected behaviour

side-preview
side-preview955Ă—637 85.7 KB

Link to document
{Provide a link to the document in question if possible}

Code snippet
{Provide a relevant code snippet}

2

Hi!

Yes this is definitely possible.

First you’ll want to get the document object every time a new document is loaded using the getDocument API.

Then with that document, you’ll want to get how many pages it has. You can use the getPageCount API for that.

Then you’ll want to loop over each page and use loadThumbnailAsync to get a thumbnail for each page. It resolves with a canvas that you can insert directly into the DOM.

When a thumbnail is clicked in your UI, you can use the setCurrentPage API to scroll to the desired page.

Overall your code might look something like this:

import WebViewer from '@pdftron/pdfjs-express'

WebViewer({
   ...
}, document.getElementById('viewer')).then(instance => {

   const { docViewer } = instance;

   docViewer.on('documentLoaded', () => {
      const doc = docViewer.getDocument();
      const pageCount = doc.getPageCount();

      for(let i = 1; i <= pageCount.length; i++) {
            doc.loadThumbnailAsync(i, (canvas) => {
                  const ele = document.createElement('div');
                  ele.appendChild(canvas);
                  ele.onclick = () => docViewer.setCurrentPage(i);
                  document.getElementById('thumbnail_panel').appendChild(ele);
            })
      }
   })

})

I hope this helps! Let me know if there are any more questions.

Thanks,
Logan

3

Thanks it worked for me!

1 Like