Detailed description of issue
In my VueJs (NuxtJs SSR enabled) application I open the viewer multiple times on the same page as the user selects different documents. The document is loaded from a byte array. It loads and shows the PDF for the first time in a Dialog control (a primevue control), however for every consecutive try to open another PDF it throws runtime exception as t is null or calling addEventListener on null or undefined. The strange part is the same functionality works when in development mode but fails in build mode.
Expected behaviour
{Provide a screenshot or description of the expected behaviour}
Does your issue happen with every document, or just one?
1 document loads but cannot open another document unless whole page is refreshed.
Link to document
{Provide a link to the document in question if possible}
The below code runs on success of an API which returns the base64 encoded PDF bytes. Hence this code gets called on every hyperlink click on the UI. All the data is supplied correctly to the viewer. As I said it works perfect in DEV mode, however fails in build mode with errors thrown from the viewer control. Code snippet
(async () => {
const _c64 = j.data.contentAsBase64
const WebViewer = await import(‘@pdftron/webviewer’)
const webDef = WebViewer.default
webDef({ path: ‘/pdfjs’, licenseKey: ‘my-license-key’ }, document.getElementById(‘webviewer’)).then((instance) => {
instance.UI.loadDocument(_self.base64ToBlob(_c64), { filename: ‘file.pdf’ })
})
})()
I am observing a new behavior now. I thought of not opening the pdf viewer inside the dialog on the same page and instead open it in a new window. Assuming it will open everytime in a new browser tab. However, the PDF loads the first time a new tab opens. Now if I click on another PDF it opens the new tab but the PDF does not load. And the strange part is :::: if I close the first tab window, the 2nd PDF which did not open early loads correctly… I am not getting it, why this should happen in a new window?
I added the closeDocument and dispose. But still no luck.
Screenshot 1 - PDF loads the first time. As you see on top I added to buttons to check the behavior. Once the PDF loads, i press Close, then dispose. That removes the PDF from the viewer. Viewer stays.
Now I click on another hyperlink and it does not load the viewer back as in the above image.
There must be something more that removes the viewer/pdf completely ?? I am guessing once that is done it will give way to the next PDF. As I have mentioned above it does not work even if I try to open PDFs in multiple tabs at the same time. Only when I close the loaded PDFs it gives way to the next 1 in queue
I have understood the issue. The DIV hosting the control loads a little later than the call to the webviewer constructor. As a result, the DIV at that time is NULL and hence the error. And strangely this happens 2nd time onwards when the viewer is opened. But you might still want to see why it did not open in different tabs until 1 of the viewers that opened first was closed. That’s strange.
I want to note that @pdftron/webviewer and @pdftron/pdfjs-express are different packages. We do not support @pdftron/webviewer on this forum, and you will have to contact PDFTron support for any further support regarding @pdftron/webviewer
