I am using pdfjs to show a pdf in a modal and i am using alpine js for this functionality
The pdf has multiple files and I want to display the nav button at the top of the pdf so that the user can navigate but I get this error:
Uncaught (in promise) TypeError: Cannot read from private field
I am open to any ideas
Thanks in advance
Here is my code:
pdfInstance: false,
createPdf() {
PDFJS.getDocument(option.url).promise.then(pdf => {
this.pdfInstance = pdf;
this.renderPage(1);
});
},
renderPage(page) {
this.pdfInstance.getPage(page).then(page => {
console.log(page)
})
}
I expected to see the pdf but I always get this error. If I don't assign the pdf to pdfInstance it works fine but then I want to render another page so I'll have to create the document every single time and I don't know if that's a good idea
This code works but I don't think it's valid because I'll have to create the document every time I render a new page
createPdf(page) {
PDFJS.getDocument(option.url).promise.then(pdf => {
pdf.getPage(page).then(page => {
console.log(page)
})
this.renderPage(1);
});
},
Hi just leaving this for anyone with the same problem
turn out that AlpineJs behavior is to turn any data property into a proxy in order to make it reactive so if you want any of alpinejs property not to be reactive you can declare them as variables and not as alpine data property like so
export default (option) => {
let pdfInstance;
return {
createPdf() {
PDFJS.getDocument(option.url).promise.then(pdf => {
pdfInstance = pdf;
this.renderPage(1);
});
},
renderPage(pageNumber) {
pdfInstance.getPage(pageNumber)
}
}
}