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

Technical Support
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