How to add UI and toolbar to PDF.js viewer?
I'm trying to implement PDF.js on my project, but it's being harder than expected.
At the moment, I'm able to render a entire PDF inside a div, but I'm not able to render the standard toolbar viewer; you can see an example what I want at top of this demo page: https://mozilla.github.io/pdf.js/web/viewer.html
My JS code looks like this at the moment:
So... how can I the toolbar viewer with all controls like demo page?
Answer
Unfortunately PDF.js package maintainers have decided to remove viewer.html from their pre-built distribution NPM package because:
There is a concern that end users mistake Firefox PDF Viewer with custom web site deployment, which will add support load to us.
You could copy this folder manually, but it would mean you would also need to update it manually, which is less than ideal approach for modern web application development.
While they have released reusable components for web developers, there is not much information on how to actually leverage these:
We are slowly refactoring the viewer to provide set of embeddable APIs, so custom viewer can be easy deployed on a custom web site, also moving burden of the UI customization on web site developers. See web/pdf_viewer files and examples at https://github.com/mozilla/pdf.js/tree/master/examples/components and #5552
All the examples, articles, and 3rd party packages (for my framework of choice) that I've come by are implementing their own UI features.
If someone has more examples on how to built upon PDF.js components, we are interested to read more about it.