Detailed description of issue
I want to create my own UI with @pdftron/pdfjs-express (8.3.0) and integrate it with React (17.0.2). I followed this page, declared webviewer-core.min.js script in index.html template. When the script runs, an error appears. It says that there is no worker. In fact, the script needs to load /pdf/PDFworker.js, but there is no such a file in the library. I’ve found worker file like /pdfjs/pdf.worker.js and even tried to use it as PDFworker.js, but it made another error, so I may guess that file is incorrect. My question is: where to find the missing worker file and what exactly should it be?
I had used pdftron before and everything had been working great until I changed the library to PDF.js Express.
Expected behaviour
Building my own UI with the library, but at least to load pdf file in a correct way.
Does your issue happen with every document, or just one?
Every document
Link to document
Code snippet
I followed this page after changing library from pdftron.
Thanks for your advice. I followed your instruction, I used the proper files. Now PDFJSDocumentType.js raises the following error in a console:
Cannot read properties of undefined (reading 'getAnnotationManager')
from window.documentViewer.getAnnotationManager(). I could define window.documentViewer as my documentViewer instance, but probably it’s not the correct way, because then the next error occures from the same PDFJSDocumentType.js file:
Cannot read properties of undefined (reading 'addSearchListener')
from window.instance.addSearchListener(...) and I have no idea what “instance” should be.
In the instruction here there is an “instance”, but I don’t know what it is. This one is not delivered from the scripts loaded in index.html, that you recommended previously. In the instruction Core is taken from the instance: instance.Core and in pdftron it was taken like that: window.Core. That works also here, Core is available from window.
My example code:
const App = () => {
const viewer = useRef(null);
useEffect(() => {
const Core = window.Core;
Core.setWorkerPath('webviewer/lib/core'); // this one is set OK, files are loaded correctly
const documentViewer = new Core.DocumentViewer();
// window.documentViewer = documentViewer; // this one is only to see if another error occurs
documentViewer.setScrollViewElement(document.getElementById('scroll-view'));
documentViewer.setViewerElement(document.getElementById('viewer'));
documentViewer.loadDocument('/files/test.pdf').then(instance => {
console.log('Document loaded', instance); // this line never runs because of errors
});
}, []);
return (
<div className="App">
<div className="header">React sample</div>
<div className="webviewer" ref={viewer} />
</div>
);
};
I will get a sample set up showing how to build your own UI. It seems like our guides drifted a bit out of date in the latest releases and I apologize for that. I’ll have an updated sample ready shortly.
I found some internal code that we use that relies on the default UI being loaded (which is a mistake on our part), which is why those errors are being throw. I’m going to make some changes internally to make this a bit easier. I’ll push a new release with those changes in the next few days, along with the sample I promised.
I just pushed out version 8.4 of Express which fixes that instance error you were seeing. I also updated the build your own UI guide and created this sample for reference.
Is there a way to set it in the window.documentViewer?
I have tried enableRightToLeftPageRendering() but that doesnt seem to work.
I can also see DisplayModeManager in the documentation and DisplayMode but there are no examples of its usage. The parameter mode is a string but I don’t see any definition of the valid values.
