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

Technical Support
1

PDF.js Express Version

7.3.1

Detailed description of issue
{I want to create a thumbnail panel for the pdf which is loaded on my viewer but I dont want to use the data element thumbnailsPanel , instead I want to retrieve each page one by one from the pdf and create a panel of my own , similar to that of pdfjs (with correct sequence and active card boundary). Can u give me a headstart on that? Thanks !}

Expected behaviour
{Provide a screenshot or description of the expected behaviour}

Does your issue happen with every document, or just one?
{Answer here}

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

Code snippet
{Provide a relevant code snippet}

2

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:

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

4

Hey thanks ! This surely helps a lot .

1 Like