Skip to content

Setup PDF.js in a website

Tim van der Meij edited this page May 31, 2024 · 41 revisions

You can choose to use a pre-built version of PDF.js or build PDF.js from source.

Pre-built PDF.js

Official releases

The official releases from https://github.com/mozilla/pdf.js/releases include the generic build of PDF.js and the viewer. You should always use the latest release for production applications and the pre-release only if you're willing to test the next version. This is most likely the best choice if you're not looking to build your own viewer from scratch using our viewer components.

The viewer is built on the display layer and is the UI for the PDF viewer in Firefox and the other browser extensions within the project. It can be a good starting point for building your own viewer. However, we do ask if you plan to embed the viewer in your own site, that it not just be an unmodified version. Please re-skin it or build upon it.

NPM

Install the PDF.js dependency in your project:

npm install pdfjs-dist --save

You can find a usage example at https://github.com/mozilla/pdf.js/blob/master/examples/node/getinfo.mjs.

Webpack

Install the PDF.js dependency in your project:

npm install pdfjs-dist --save-dev

To use the library in your project add require('pdfjs-dist') to your file requires and build your project normally. The worker shall be built into a separate bundle: take the file "./node_modules/pdfjs-dist/build/pdf.worker.entry.js" or built a separate file that uses require('pdfjs-dist/build/pdf.worker'). PDFJS.workerSrc shall be set to point to this file. You can use the pdfjs-dist/webpack module for PDF.js autoconfiguration.

Refer to https://github.com/mozilla/pdf.js/tree/master/examples/webpack for a complete example.

Build PDF.js from source

After cloning PDF.js, you can build PDF.js from source by running the npx gulp generic command. This will create the built PDF.js in the build folder.