https://github.com/mozilla/pdf.js/wiki/Third-party-viewer-usage
<iframe id="pdf-js-viewer" src="/pdf/web/viewer.html?file=" title="webviewer" frameborder="0" width="100%" height="700" allowfullscreen="" webkitallowfullscreen=""/>
displayPdf: async function (id) {
const pdfArrayBuffer= await getPdf(id)
const pdfViewerIFrame = await getPdfViewer()
await pdfViewerIFrame.contentWindow.PDFViewerApplication.initializedPromise
await pdfViewerIFrame.contentWindow.PDFViewerApplication.open(pdfArrayBuffer)
},
getPdfViewer: function (id = 'pdf-js-viewer') {
return new Promise((resolve, reject) => {
let pdfViewerIFrame = document.getElementById(id)
//if already loaded in DOM, return it
if (pdfViewerIFrame?.contentWindow?.PDFViewerApplication) {
resolve(pdfViewerIFrame)
} else {
//if not loaded yet, set up eventListener
document.addEventListener("webviewerloaded", async () => {
pdfViewerIFrame = document.getElementById(id)
resolve(pdfViewerIFrame)
})
}
})
}
This logic helped me to get the PDFViewerApplication in every situation correctly, for example when reloading the page with F5 or when having the PDF viewer already loaded and just wanting to open another PDF file.