I am currently incorporating PDFtron into a Vue component. To display the PDF viewer iFrame upon loading the Vue, I am initializing the instance in the mounted hook:
mounted() {
const viewerElement = document.getElementById('viewer');
this.viewer = new PDFTron.WebViewer({
path: 'https://www.pdftron.com/4.0/lib',
l: 'apikey'
}, viewerElement);
}
I want to retain this instance so that I can use it again in a method like so:
methods: {
getPDF() {
this.viewer.loadDocument('https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf')
}
}
To achieve this, I tried creating a viewer variable within my data attributes and saving the pdftron viewer to it by storing it in this.viewer. However, whenever I attempt to call the getPDF function, I encounter the following error:
The viewer instance is not defined yet.The getPDF function triggers on a button click like this:
<v-btn color="primary" @click="getPDF(url)" :disabled="!valid">Load PDF</v-btn>Update:
I revised my getPDF function as follows:
getPDF() {
const viewerInstance = this.viewer.getInstance()
viewerInstance.loadDocument('https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf')
}
Yet, I still encounter the same error message
The viewer instance is not defined yet