PDF Viewer - Javascript Plugin to Embed PDF Documents

resources
Published on August 30, 2017

PDF Viewer is a premium Javascript plugin. It is priced at $12.

PDF Viewer is a responsive Javascript plugin for embedding PDF files in web pages and applications.

From version 2.1 this plugin allows the PDF to be seen only on the website. Even if users download the PDF, they cannot open it because it will be password protected. Now users have to come to your website to view the PDF !

With version 3.0 you can find whether the user has viewed all pages of the PDF

Demo #1 - Normal Mode

In this mode, the PDF will be rendered along with navigation buttons.

Demo #2 - Image Mode

In this mode, the first page of the PDF will be rendered as an image. On clicking this image, PDF will be rendered as a modal dialog.

Demo #3 - Text Mode

This is probably the most useful mode of PDF Viewer. You can convert any existing link (or element) in your website, so that when you click on it, PDF will be rendered as a modal dialog.

See the below link. It is just a normal link to a PDF file. Now through this plugin, a click on it results in the PDF being displayed in the same page as a modal.

Checkout this PDF

Allow PDFs to be Seen Only On Your Website

From version 2.1, this plugin allows you to secure your PDFs. The logic behind secure mode is that you want the PDF to be seen only in your website. You make the PDF password protected, and allow the plugin to open the PDF via a special key.

In this way the PDF can be viewed only in the webpage. If any user manages to download the PDF, he cannot open it because it is password protected.

As a demo, look below. The plugin has displayed this PDF, which is password protected. The plugin opens the PDF via a special key which can be generated here.

Get Analytics Data

From version 3.0 you can get analytics data. There are 2 types of analytics data that you can get :

  1. Impression : An impression means that the user has done some action with the PDF. He may have clicked a menu button, or viewed the PDF in a modal window. Through this you can get an idea that the user did not ignore the PDF in the webpage.
  2. PDF Fully Viewed : Through this you can get whether the user has fully viewed the PDF, by spending a fixed no of seconds on each page of the PDF

You can handle analytics data yourself through callback functions, or send it to Google Analytics.

As a demo go through all pages of the below PDF. Spent at least one second on each page. When you've viewed all pages you will see a confirmation message coming up.

Purchase this Plugin

Purchase for $12 only

What will you get ?

  1. Lifetime updates for free.
  2. It is my responsibility to take care of bugs, if any.
  3. Support for 6 months. This support includes answering to your questions regarding the code - for example if you trying to use this plugin in a 3rd party environment.
  4. Highly commented source codes of the plugin.
  5. Thorough documentation on how to use.

Features of the Plugin

  • Embed a PDF in webpage.
  • Responsive - will adjust to the screen size.
  • Allow PDFs to be seen only on your website
  • Previous & Next Page navigation buttons
  • Full-Screen button to view the PDF in full-screen.
  • Download button to download the PDF. You can choose to show or hide this button.
  • View PDF in a modal window
  • Embed option to show the picture of the first page, clicking on which PDF is opened in modal window
  • Set a theme color for the viewer
  • Place multiple PDFs in single page
  • Get analytics data (PDF impressions and PDF fully viewed)
  • Google Analytics integration
  • Works in all major browsers - desktop & mobile, including IE11+

New Features in Version 3.2

  1. Option to set position of toolbar either at top or bottom of the PDF

New Features in Version 3.1

  1. Send analytics data to Google Analytics

New Features in Version 3.0

  1. Get analytics data (like whether user has seen all pages of the PDF)

New Features in Version 2.1

  1. Secure mode added - you can ensure that the PDF can be seen only in the website
  2. Show or hide the Download button

New Features in Version 2.0

  1. Responsive user interface
  2. Convert any existing element on page to a modal PDF
  3. Navigate the PDF with keyboard controls - top & left key to go to previous page, down and right key to go to next page

New Features in Version 1.3

  1. Improved user interface for mobile devices

New Features in Version 1.2

  1. Render PDF in modal dialog or as inline text

New Features in Version 1.1

  1. SVG icons in PDF Viewer menu bar
  2. You can set a theme color of icons
  3. Fixed menu bar in full-screen mode

Using the Plugin is Easy

You just need to include the required JS & CSS files, then setup a container element that would hold the different options for the PDF Viewer.

<div class="plugin-pdf-pro" data-mode="normal" data-pdf-url="http://usefulangle.com/img/posts/sample.pdf" data-color="#EB6E00"></div>

Wordpress Plugin

There is also a Wordpress plugin available with the same features. Here is the demo of the Wordpress plugin.

In this Tutorial