TouchPDF是一款支持移动触摸的网页版PDF格式文件阅读器jQuery插件。它基于pdf.js库来制作,并且支持移动手机,也支持PDF文档的缩放操作。它的特点还有:
- 可以使用手指来滑动到前一页或下一页。
- 支持文字的缩放。
- 允许链接文档中的内部或外部链接。
- 可添加彩色的tabs作为书签。
- 直接从DOM中加载,不使用iFrame。
使用方法
TouchPDF插件依赖于PDF.js,一款由Mozilla出品的pdf阅读器插件。
另外还是用了PanZoom颜色缩放jQuery插件,以及用于支持移动触摸的TouchSwipe插件。
使用TouchPDF插件需要引入以下一些依赖文件。
<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" />
HTML结构
添加一个空的<div>
元素作为PDF阅读器的容器。
<div id="myPDF"></div>
初始化插件
在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该PDF阅读器插件。
<script type="text/javascript"> $(function() { $("#myPDF").pdf( { source: "yourfile.pdf" } ); }); </script>
你也可以为PDF页面添加一些彩色的Tabs书签。
$(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"}, ] }); });
配置参数
该PDF阅读器的可用配置参数有:
参数 | 类型 | 默认值 | 描述 |
source | string | "" | 要显示的PDF文件的路径 |
title | string | "TouchPDF" | 在工具栏中显示的PDF文件的名字 |
tabs | array | [] | 侧边栏显示的tabs |
tabsColor | string | "beige | 所有tabs默认的背景颜色。可用的颜色有:green", "yellow", "orange", "brown", "blue", "white", "black" 或者你可以通过CSS来定义自己的颜色 |
disableZoom | boolean | false | 是否禁止PDF文档缩放。默认情况下PDF文档可以通过鼠标滚动,两个手指滑动,键盘+/-键和工具栏按钮来进行缩放 |
disableSwipe | boolean | false | 是否禁止PDF文档的滑动触摸。默认情况下PDF文档可以通过手指滑动来翻页 |
disableLinks | boolean | false | 是否禁止PDF文档中的所有内部和外部超链接 |
disableKeys | boolean | false | 是否禁止使用键盘箭头键来翻页和禁止使用键盘+/-键来缩放 |
redrawOnWindowResize | boolean | true | 强制在窗口大小改变时更改PDF阅读器的大小 |
pdfScale | float | 1 | 定义PDF页面大小和TABS大小之间的比例 |
quality | float | 2 | 设置PDF文件加载时的比例 |
showToolbar | boolean | true | 是否显示工具栏 |
loaded | function | null | 当PDF文件加载完毕之后触发的回调函数 |
changed | function | null | 当一个新的页面被显示时触发的回调函数 |
loadingHTML | string | "Loading PDF" | 在PDF文档被加载完成之前显示在空白页面上的文本或HTML |
loadingHeight | int | 841 | 在PDF文档被加载完成之前显示的空白页面的高度,默认为A4纸的高度 |
loadingWidth | int | 595 | 在PDF文档被加载完成之前显示的空白页面的宽度,默认为A4纸的宽度 |
每一个Tab都必须使用Json对象格式来定义,可用的TAB属性如下:
属性 | 类型 | 默认值 | 描述 |
title | string | Mandatory | 显示在Tab上的文字,小于3个字符将水平显示,大于3个字符将垂直显示 |
page | int | Mandatory | 链接到PDF文档中的页码,页码从1开始 |
color | string | 于PDF阅读器中定义相同 | 设置Tabs的颜色 |
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 | 基于PDF文档的顶部对齐tab,该参数可以设置一个像素值,使tab往下偏移 |
bottom | int | undefined | 基于PDF文档的底部对齐tab,该参数可以设置一个像素值,使tab往上偏移 |
height | int | undefined | 指定tab的高度,默认情况下,tab的高度依赖以字符的多少 |
TouchPDF插件的github地址为:https://github.com/loicminghetti/touchpdf
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!