Since this post was published, we have released Foxit PDF SDK, the only true multi-platform SDK in the market, available for Windows, Mac, Linux, iOS, Android, UWP and Web. It features a single, consistent core API, as well as a built-in viewer and UI for faster development. Learn more.

We recently created a new package for our WebPDF technology — a pure JavaScript library called WebPDF.js for viewing PDF files in web browsers — that requires no plug-ins and provides native-like performance. We also allow PDF.js users to migrate painlessly to WebPDF.js. This JavaScript PDF Viewer is fast and powerful, giving your customers all the tools they need in the comfort of their browser.

Below I will show you how to get up and running with WebPDF.js so you can add PDF viewing functionality to your web appsĀ for free!

Precondition: You will need a web container environment ready for testing and a license key if you don’t want to see a watermark which you can obtain from us for free by emailing webpdfdemo@foxitsoftware.com.

Setup JavaScript PDF Viewer – WebPDF.js

  1. Download WebPDF.js from GitHub
  2. Unzip it in the webapps folder under the container.
    JavaScript PDF Viewer
  3. Open Viewer.html in a browser, you will see WebPDF.js load in the browser with a sample PDF. WebPDF.js is now setup and can be used to view PDF files in your browser. Next we’ll show you how to integrate WebPDF.js into your own web page.
    WebPDF.js JavaScript Viewer

Integrate our JavaScript PDF Viewer into your web page

  1. Create a sample web page called “index.html”and add a hyperlink to a PDF. Please copy the PDF file into the same folder as “viewer.html”.
    Integrate JavaScript PDF Viewer
  2. Open the sample web page and then click the link in the page, the PDF will now open in WebPDF.js.
    Open JavaScript PDF Viewer

Well, work done! It really is that simple to integrate into your web pages. WebPDF.js provides the following features:

  • PDF viewing
  • Go to page
  • Zoom
  • Rotate page
  • Page thumbnail
  • Bookmark
  • Access file attachments
  • Text search
  • Print selected pages
  • Open password protected PDF
  • Full-screen view

WebPDF.js versus PDF.js

Webpdf.js is based on Foxit’s advanced PDF technology. Unlike other libraries such as PDF.js, WebPDF.js provides high fidelity PDF rendering inherited from it is market proven technology and additionally it is engineered to be immune to browser variations in HTML5 support. Beside the basic PDF objects (text, image and path), WebPDF.js supports advanced objects (patterns, shading and transparency) and image objects (jpeg, jpx and path). PDF.js cannot provide the same advanced support for all PDF objects because of HTML5 Canvas limitations and less advanced core PDF technology.

Images are worth a thousand words, so below are some screenshots comparing PDF.js and Webpdf.js (labeled FOXIT.JS in the screenshots).

Index Color
JavaScript PDF Viewer Color

Shading
JavaScript PDF Viewer Shading

Image CCITT
JavaScript PDF Viewer Image CCITT

Transparency
JavaScript PDF Viewer Transparency

Layers
JavaScript PDF Viewer Layers

Finally, for developers who have already implemented PDF.js into their projects but find the lack of accuracy and support troublesome, we have good news for you. We’ve made sure that PDF.js users can easily migrate to WebPDF.js by simply swapping out PDF.js and swapping in WebPDF.js with no changes required to your front-end code. It is ready to swap in and do the job you need it to do in no time at all.

OK, we would love to hear your feedback on WebPDF.js. And of course, if you require more advanced functionality — we’ve got that too. Just reach out to us and we’ll be happy to help you.

Please emailĀ webpdfdemo@foxitsoftware.com if you would like a license key and if you have any feedback or require any support. We look forward to hearing from you!

TRY A FREE TRIAL TODAY