How can we create our custom thumbnail panel beside our viewer?

Technical Support
3

Hey there! Thanks for trying out Express.

There are actually a few approaches you can take here:

1) Customize the UI

Our UI is open source which means you can fork the source code and edit the UI however you wish. We have a guide on how to do this here.

If you went this route, you could edit the thumbnail panel components as needed.

2) Make your own UI

Another option is to use our APIs to make your own thumbnail panel UI outside of the PDF.js Express UI.

This would involve looping over the pages in the document and calling loadThumbnailAsync for each page.

Here’s a bit of code to get you started:

  instance.docViewer.on('documentLoaded', async () => {

    const doc = instance.docViewer.getDocument();
    const pageCount = doc.getPageCount();

    for (let i = 0; i < pageCount; i++) {
      const pageNumber = i + 1;
      await new Promise(resolve => {
        doc.loadThumbnailAsync(pageNumber, (canvas) => {
          // Do something with the Canvas here (append to your UI)

         resolve()
        })
      })
    }
  })

I hope this helps!

Thanks,
Logan