Load multiple instances on a single page without loading same js files

Technical Support
1

Which product are you using?
PDF.js Express Plus

PDF.js Express Version
8.1.1

Detailed description of issue
We have situations where we need to load 1-4 pdfs on a single page, however I noticed that it will load duplicates of the same JS files. Is there a way to create instances that will share the same files and not load them all over again?

Screen Shot 2021-11-09 at 11.54.59 AM

Expected behaviour
Create multiple pdf instances without loading duplicate js files.

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

Code snippet

<div id="document1"></div>
<div id="document2"></div>

WebViewer({
    path: '/Content/pdfexpress/public',
    licenseKey: 'key',
    initialDoc: `document1.pdf`,
  }, document.getElementById('document1'))

WebViewer({
    path: '/Content/pdfexpress/public',
    licenseKey: 'key',
    initialDoc: `document2.pdf`,
  }, document.getElementById('document2'))
3

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:

4

Hey there! Sorry for the delay, I was away for a few days.

Unfortunately we do not have a great way to handle this use case right now without reloading the library.

The library was designed to only have one document opened at once, so sharing instances of the viewer with multiple files is not something we can do right now. The best way to easily do it is just to load the library multiple times.

One thing you can do is generate a large thumbnail of each document and render that thumbnail to your webpage somewhere.

You can use the createDocument function to create a document in memory, and then extract a thumbnail out of the document.

  const doc = await instance.Core.createDocument(myBlob)

  doc.loadCanvasAsync({
    pageNumber: 1,
    zoom: 1,
    drawComplete: async (thumbnail) => {
      // thumbnail is an instance of 'HTMLCanvasElement' - you can render it directly to the DOM
      document.body.appendChild(thumbnail);
    }
  })

One other thing I would like to note is that you need to be careful of memory consumption - loading documents is a memory intensive operation, and doing that 2 or 3 times will cause issues on less powerful devices.

Thanks!
Logan

5

Hey Logan, okay thanks for letting me know. I knew it wasn’t a typical use case but just is one my company does on certain pages. So no problem was just worth checking into.

Thanks!

2 Likes