Touch-enabled jQuery Web PDF Viewer - TouchPDF

TouchPDF is a jQuery plugin that uses pdf.js to phrase and render a web PDF viewer that supports touch gestures and auto page tabs.

Dependencies:

• PDF.js
• jQuery touchSwipe plugin
• jQuery panzoom plugin
• jQuery mousewheel plugin

Features:

• PDF can be zoomed using scroll, two fingers pinch, +/- keys, and toolbar buttons.
• PDF can be swiped using one finger.
• A toolbar on top of the document with title, page number and buttons for next/prev pages and zooming.

How to use it:

1. Load the jQuery TouchPDF's CSS file in your document's head section.

<link href="jquery.touchPDF.css" rel="stylesheet">

2. Load jQuery library, jQuery TouchPDF plugin and other required resources at the end of the document.

<script src="pdf.compatibility.js"></script>
<script src="pdf.js"></script>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="jquery.touchSwipe.min.js"></script>
<script src="jquery.touchPDF.js"></script>
<script src="jquery.panzoom.js"></script>
<script src="jquery.mousewheel.js"></script>

3. Create a DOM element for the web PDF viewer.

<div id="myPDF"></div>

4. Initialize the plugin and specify the path of your PDF file to be displayed in the DOM element.

$(function() {
  $("#myPDF").pdf( {
    source: "demo.pdf",
    // MORE SETTINGS HERE
  } );
});

5. All the plugin settings.

// Path of PDF file to display
source: null,

// Title of the PDF to be displayed in the toolbar
title: "TouchPDF",

// Array of tabs to display on the side.
tabs: [],

// Default background color for all tabs. 
// Available colors are "green", "yellow", "orange", "brown", 
// "blue", "white", "black" and you can define your own colors with CSS.
tabsColor: "beige",

// Disable zooming of PDF document.
disableZoom: false,

// Disable swipe to next/prev page of PDF document. 
disableSwipe: false,

// Disable all internal and external links on PDF document
disableLinks: false,

// Disable the arrow keys for next/previous page and +/- for zooming
disableKeys: false,

// Force resize of PDF viewer on window resize
redrawOnWindowResize: true,

// Show a toolbar on top of the document with title, 
// page number and buttons for next/prev pages and zooming
showToolbar: true,

// A handler triggered when PDF document is loaded
loaded: null,

// A handler triggered each time a new page is displayed
changed: null,

// Text or HTML displayed on white page shown before document is loaded 
loadingHeight: 841,

// Height in px of white page shown before document is loaded 
loadingWidth: 595,

// Width in px of white page shown before document is loaded 
loadingHTML: "Loading PDF"

Change log:

2015-12-08

• v0.4: bugfix

---

This awesome jQuery plugin is developed by loicminghetti. For more Advanced Usages, please check the demo page or visit the official website.