At first glances, PDF viewer seems to be as easy as opening a PDF URL in an Iframe; however, not only uncustomizable, but also, if some browsers doesn't support PDF browsing, it could be a problem.
A solution to this would be Mozilla's PDF.js. However, the PDF viewer isn't prebuilt for you in pdf.js-dist, only some minimal JavaScript files.
Building PDF.js by yourself
By this way, it will also build the PDF viewer (which is normally used in Mozilla Firefox). You can also customize HTML, CSS and JavaScript.
git init
npm i gulp-cli
git submodule add https://github.com/mozilla/pdf.js.git
cd pdf.js
npm i
# Edit web/app_options.js (for default PDF); and `web/viewer.html or CSS files (for UI) to your liking
npx gulp generic
cp -r build/generic ../pdf.js-dist
cd -
npx http-server pdf.js-dist -o /web/viewer.html
I already built it for you
This is here. Just copy the /dist folder.
patarapolw
/
pdf.js-viewer
Example of how to build example viewer of Mozilla's PDF.js
My example project
This online Lilypond compiler / playground is made using this, using the endpoint /pdf.js/web/viewer.html?file=<FILEPATH>#pagemode=none. It's a quick project of mine to compile MIDI and WAV files, and share it.
Top comments (0)