TouchPDF

TouchPDF is a simple web PDF viewer for jQuery. It is based on the pdf.js library and support mobile gestures for swiping pages and zooming.

Features

Use finger to swipe to next or previous page
Pinch to zoom in and out
Follow links to document sections or external URLs
Add colorful tabs for quick access to bookmarked pages
Loads directly in your DOM, without iFrame

Supported browsers

Firefox, Chrome, Opera, IE >= 9, Safari, Android Browser

Demo

Check out the online demo at: http://touchpdf.net/demo/index.htm

Getting started

###Get the jQuery plugin To get a local copy of the plugin, clone it using git:

$ git clone git:// github.com/loicminghetti/touchpdf.git touchpdf
$ cd touchpdf

Note: you need to start a local web server as some browsers don't allow opening PDF files for a file:// url.

###Usage Add the following to your document's <head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="pdf.compatibility.js"></script>
<script type="text/javascript" src="pdf.js"></script>
<script type="text/javascript" src="jquery.touchSwipe.js"></script>
<script type="text/javascript" src="jquery.panzoom.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.touchPDF.js"></script>
<link href="jquery.touchPDF.css" rel="stylesheet" media="screen" />

Add an empty div in your document that will contain the PDF viewer

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

Load a PDF file by adding the following script at the end of your document

<script type="text/javascript">
  $(function() {
    $("#myPDF").pdf( { source: "yourfile.pdf" } );
  });
</script>

You ca also add bookmarks tabs to your PDF display:

$(function() {      
  $("#myPDF").pdf( {
    source: "demo.pdf",
    tabs: [
      {title: "Tab 1", page: 2, color: "orange"},
      {title: "Tab 2", page: 3, color: "green"},
      {title: "Tab 3", page: 5, color: "blue"},
    ]
 });
});

###Viewer options

Option	Type	Default	Description
source	string	" "	Path of PDF file to display.
title	string	"TouchPDF"	Title of the PDF to be displayed in the toolbar.
tabs	array	[ ]	Array of tabs to display on the side. See below for syntax.
tabsColor	string	"beige"	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.
disableZoom	boolean	false	Disable zooming of PDF document. By default, PDF can be zoomed using scroll, two fingers pinch, +/- keys, and toolbar buttons.
disableSwipe	boolean	false	Disable swipe to next/prev page of PDF document. By default, PDF can be swiped using one finger.
disableLinks	boolean	false	Disable all internal and external links on PDF document..
disableKeys	boolean	false	Disable the arrow keys for next/previous page and +/- for zooming (if zooming is enabled).
redrawOnWindowResize	boolean	true	Force resize of PDF viewer on window resize.
pdfScale	float	1	Defines the ratio between your PDF page size and the tabs size.
quality	float	2	Set quality ratio for loaded PDF pages. Set at 2 for sharp display when user zooms up to 200%.
showToolbar	boolean	true	Show a toolbar on top of the document with title, page number and buttons for next/prev pages and zooming.
loaded	function	null	A handler triggered when PDF document is loaded (before display of first page).
changed	function	null	A handler triggered each time a new page is displayed.
loadingHTML	string	"Loading PDF"	Text or HTML displayed on white page shown before document is loaded.
loadingHeight	int	841	Height in px of white page shown before document is loaded (default is A4 height).
loadingWidth	int	595	Width in px of white page shown before document is loaded (default is A4 width).

###Tab attributes

Each tab must be defined using a json object with the following attributes:

Attribute	Type	Default	Description
title	string	Mandatory	Text to display on the tab. Text of less than 3 characters will be displayed horizontaly, longer text will be displayed verticaly.
page	int	Mandatory	PDF document page number to link to. Page numbering starts at 1.
color	string	As defined in viewer	Set a different color to the tab. See above for available colors.
offset	int	0	Pill up tabs with a small offset so that the user knows there are hidden tabs behind. Starts at 0.
top	int	undefined	Align tab from the top of the PDF document, by a given number of pixels. By default, tabs are positioned one after the other.
bottom	int	undefined	Align tab from the bottom of the PDF document, by a given number of pixels.
height	int	undefined	Set a specific height to the tab. By default, tab height will depend on the number of characters in the title.

Credit

This plugin heavily relies on the following great open source work:

PDF.js by Mozilla https://mozilla.github.io/pdf.js/
PanZoom jQuery plugin by Timmy Willison https://github.com/timmywil/jquery.panzoom
TouchSwipe jQuery plugin by Matt Bryson https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

Getting help

If you need help you can contact me

Enjoy and feel free to contribute!

5.5 KiB Raw Blame History