Here is my implementation of a custom PDF viewer using the PDF.js library. I created this for my website (of which the files can be found here) to better seamlessly integrate this pdf viewer with the style of the rest of my site. I've linked two demo pages below to experience it in action.
PDF Viewer w/page styling
PDF Viewer ONLY
It's pretty simple, only containing the necessary elements of a PDF viewer:
- A sidebar view with page thumbnails
- Page forward/backward buttons
- Page number input field
- Zoom in/Zoom out buttons
- Zoom seletion menu
- Download PDF button
- Print PDF button
- An expand button (which opens a modal view with the same features)
Default View
Default View: Sidebar open, 200% Zoom
Modal View: Sidebar open, Page Width
Below is a list of things I want to or plan to add at some point in the future:
- Touch gestures (i.e. pinch to zoom, drag with two fingers, etc.)
- Increase resolution of pdf pages on smaller screens
- Selectable and searchable text
If you happen to find any redundant/unused code (which there very may well be) or feel there are ways to improve this, please, consider creating an Issue, or fork this project and create a Pull Request.