Customizable PDF viewer with self-built PDF.js

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.