Two instances on different elements, licenseKey isn't sending to the 2nd

Technical Support
1

Which product are you using?
PDF.js Express Viewer

PDF.js Express Version
UI version -‘8.7.0’
Core version - ‘8.7.4’
webviewer.min.js - ‘8.7.4’

Detailed description of issue
I am implementing PDF JS Express Viewer on several pages using TS and Vue. All instances are working EXCEPT the page where I have one instance instantiated with Vue and one instantiated with TS. This is the only page where I need two viewers. The TS one loads appropriately and I see this in the call to /events - it loads the viewer and then the document.
Screenshot (600)

For the Vue instance, in /events I see only one load event for the document (I’m not allowed to add another picture…but it looks the same, except the license key is blank and only the load document event is passed). I think this is causing my issue.

The viewer appears separately in the UI for both instances, and I double checked that my license key is being sent correctly in both cases.

I am sending the same licenseKey to both instances. It is removed in the request for the 2nd instance. I also tried removing the first instance entirely when the user moves to the tab where I need the 2nd instance. I got the same result. I also tried using two different licenseKeys. Same result.

Is there a way to force the 2nd viewer to send a load viewer event? It seems to me this is what is missing.

Expected behaviour
Both instances will pass in the licenseKey I provide to the request, and both instances will load documents.

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

Link to document
N/A

Code snippet

This is the instance that is working. The other is similar

 PDFJSExpress({
					path: "/js/lib/pdfjs-express/public", // point to where the files you copied are served from
					licenseKey: licenseKey.value,
				}, document.getElementById("pdfPreview")).then((instance) => {
					return instance;
				});

when loading the document...
			this.pdfViewerInstance.then(instance => instance.UI.loadDocument(this.chartPdfURL));
3

Here is the request for the 2nd instance creation
Screenshot (601)

4

Hi there,

We generally do not recommend using multiple instances to load your documents, see our best practices below:

If you need to use multiple instances, you will have to completely remove the 1st instance of WebViewer and then remount it on the new element.

Best regards,
Kevin Kim

5

Hi Kevin,
thank you for the response. I didn’t see any information about removing an instance and making a new one at that link.

I did attempt to accomplish this but was having the same issues creating the new instance. Right now I am using “dispose()” on the first instance. Perhaps I’m having a timing issue, but can you let me know if this is the proper method? Also is there a way to access the first instance from a different file?

6

also, just to mention, I don’t think I’ve read anywhere explicitly that you can’t use two instances at the same time in your documentation…I would say there’s a difference between “we don’t suggest it” and “it’s not possible”. As far as I can tell, it is not possible and being able to find that information would have saved me a good chunk of time.

7

Hi there,

While it is not suggested, it is possible. Please take a look at the implementation shown in this forum post:

Note that the above post is for Apryse WebViewer and pdf.js express does not have the workerTransportPromise option but the implementation should be similar.

Best regards,
Kevin Kim