Multiple pdf.js instances

Question

I have a single page app and in this app I have different pages that display different pdfs using pdf.js. I keep running into issues because once I initialize the pdf.js once, it uses those settings for each different instance, or so it seems.

I want to be able to destroy the pdf.js object and create a fresh object each time I go to these pages. So far I havent been able to find a destroy method, I have tried removing the canvas object, closing the PDFViewerApplication but I am still having these issues.

Some of the errors I see are: -The overlay is already registered -offsetParent is not set -- cannot scroll

Answer 1

Quickest answer is that your single-page website could use frames.

* { border: 0; margin: 0; padding: 0; overflow: hidden; }
iframe { width: 100%; height: 50%; width: 100vw; height: 50vh; }

<iframe src="http://mozilla.github.io/pdf.js/web/viewer.html"></iframe>
<iframe src="http://mozilla.github.io/pdf.js/web/viewer.html"></iframe>

The JavaScript global objects will be bound to their respective frame's Window object, and not interfere with each other.

You can use Mozilla's example, change viewer.js to pull from the query variable or hash component of location. Compose your URL for the frame with some parameters such as ?path=document123.pdf or #document123.pdf.

If you need to destroy one, you can just destroy the frame. If you need to manipulate one, you can reach inside the frame (CORS, XSS rules, security permitting...) by using contentWindow (or (iframe.contentDocument || iframe.contentWindow.document)) on the iframe element.

If you aren't able to directly reach in through contentWindow, you could construct a script to send and receive signals using postMessage, or just do all of the work in the frame's scripts.