Which product are you using?
PDF.js Express Viewer
PDF.js Express Version
8.7.0
Detailed description of issue
Hi,
I have integrated PDF.js Express Viewer in Vue 3 and everything is working fine except the Pan Button. I get the following error:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘querySelector’)
at (webviewer-core.min.js:476:129)
So, I can’t move by mouse click. At this point Express Viewer is looking for “#pageWidgetContainer1” and so on. I don’t know what the problem is, because all other functions available and die DOM contains the missing elements.
Expected behaviour
Move through the PDF by mouse click or finger touch.
Does your issue happen with every document, or just one?
Yes, with every document, but NOT when I load PDF.js Express instead of PDF.js Express Viewer!
Link to document
Code snippet
<template>
<div :id="'pdf-viewer-'+appInstance" class="pdf-viewer"></div>
</template>
<script>
import { defineComponent } from "@vue/runtime-core";
import WebViewer from '@pdftron/pdfjs-express-viewer';
export default defineComponent({
name: "PdfViewer",
data() {
return {
appInstance: 12345,
url: 'https://pdftron.s3.amazonaws.com/downloads/pl/PDFTRON_about.pdf'
}
},
mounted() {
const viewer = document.getElementById('pdf-viewer-'+this.appInstance);
WebViewer({
path: '/schrage-portal-test/pdfviewer_assets/', // point to where the files you copied are served from
licenseKey: '.........',
initialDoc: this.url
}, viewer).then((instance) => {
const theme = instance.UI.Theme;
instance.UI.setTheme(theme.DARK);
instance.UI.setLanguage('de');
const { Core, UI } = instance;
Core.documentViewer.addEventListener('documentLoaded', () => {
console.log('document loaded');
});
})
},
});
</script>
<style>
.pdf-viewer {
width: 100%;
height: 100%;
}
</style>
Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here
Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here
yes, your example is working, but you are using the assets from “PDF Express Plus”. With these assets my code is also working. I just have the problems, when I am working with the assets from “PDF Express Viewer”.
I wasnt able to reproduce it with PDFJS Express Viewer, can you provide a minimal sample to reproduce the issue?
Thanks!
Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron
Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here
the project is too big to produce a minimal example in short time. I went ahead with Mozilla pdf.js and a small own UI. This is working fine for me now.
I will come back to PDFJS Express when the premium features are needed.
hello Tyler,
Here is my demo,I met the same issue.
Please check the package version，I’m trying this now. Everything else is normal at present. This is the only problem that bothers me pdfjs-express-viewer-vue-sample.zip (2.2 MB)
We are looking to release an 8.7 patch release to include this fix.
Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron
Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here
We are looking into pushing the updated build today.
Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron
Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here
Hi! Any update on the new patch release (to npm)? Still getting said issue in PDFJS Express Viewer 8.7.0, which is breaking thumbnails and search, and can confirm the patched version you posted in this thread does fix issue.
