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.
- 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
Firefox, Chrome, Opera, IE >= 9, Safari, Android Browser
Check out the online demo at: http://touchpdf.net/demo/index.htm
###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 touchpdfNote: 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. |
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
If you need help you can contact me
Enjoy and feel free to contribute!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent