Open Source JavaScript PDF Viewer Library

What is PDF.js?

PDF.js is an open source JavaScript and HTML5 based PDF viewer library developed by Mozilla that allows viewing PDF (Portable Document Format) documents in the browser.

PDF.js supports several features which are listed below:

• Render PDFs: You can open and view, read or render PDF documents in web browsers.
• Print/Save PDFs: PDF.js also allows to print or save PDF documents from your favorite web browser.
• Presentation Mode: Using Presentation mode, you can show PDF pages in full screen and can navigate to each page like a presentation slide.
• PDF Navigation: PDF.js provides easier navigation controls using which you can move to next or previous pages. You can also qucikly jump to a desired page by entering number of the page.
• PDF Annotation: You can also annotate PDF documents by adding text, images or drawing on the PDF pages.
• Rotate PDF Pages: Using PDF.js, you can also rotate PDF pages clockwise or counter-clockwise.
• Scrolling PDF: PDF.js offers nice controls to scroll pages horizontally or vertically etc.
• PDF Document Properties: Last but not the least, you can also view properties of PDF documents within the browser using PDF.js viewer.

GitHub Stats

Name:
Language:
Stars:
Forks:
License:
Repository was last updated at

Getting Started with PDF.js

There are three ways to get PDF.js and start using it in your web projects.

1. Build from source

You can clone PDF.js repository from GitHub and build it by yourself after installing Node.js, gulp and PDF.js dependencies by following below steps:

git clone https://github.com/mozilla/pdf.js.git
cd pdf.js

https://nodejs.org/en/download

npm install -g gulp-cli

npm install

gulp server

2. Use pre-built distribution

PDF.js also offers pre-built distributions along with source code which you can find at PDF.js releases on GitHub. You can download pre-built PDF.js library and start using it.

3. Use hosted library via CDN

PDF.js is also hosted on free CDN servers. Few links are shared below:

• https://cdnjs.com/libraries/pdf.js
• https://www.jsdelivr.com/package/npm/pdfjs-dist
• https://unpkg.com/pdfjs-dist

Run PDF.js Viewer

After you download and extract a pre-built distribution library from GitHub, you find two folders: build and web. PDF.js library files can be found in build folder where as web folder contains a viewer project that incudes viewer.html, viewer.css, viewer.js and related files. If you check viewer.html code, you can see that it references pdf.js library from build folder and other related css and js files as well.

Let's run viewer.html in browser to see how PDF.js viewer looks like:

Render/View PDF Documents

To simply render or view a PDF document in the browser using PDF.js viewer library, we must include PDF.js library into our HTML document header using script tag, add a canvas to HTML body and then add necessary JavaScript code to use pdfjsLib and promise objects to handle asynchronous loading and rendering of the PDF document.

Above code just loads a PDF document in the browser without any user interface or controls as below:

Online Demo

Try this fully featured online PDF.js Viewer demo to explore all features of PDF.js library.

Conclusion

PDF.js is free and open source JavaScrpit PDF viewer library with a strong community. It provides cross-browser support for both modern and legacy browsers. Yes, user experience on legacy browsers may not be same as the modern ones but it's still good as a free library. It's secure and customizable. Features are limited but as a PDF viewer, it works great.

PDF.js provides nice APIs and architecture to build a web based PDF viewer. Since it's time consuming to add more UI controls to the viewer so to save developers' time, PDF.js also provides source code of a fully functional and feature-rich PDF veiwer which you can find (check viewer.html, viewer.js and viewer.css etc.) in the web folder of the PDF.js library distribution package.

Similar Products