支持移动触摸的网页版PDF格式文件阅读器插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

TouchPDF是一款支持移动触摸的网页版PDF格式文件阅读器jQuery插件。它基于pdf.js库来制作，并且支持移动手机，也支持PDF文档的缩放操作。它的特点还有：

可以使用手指来滑动到前一页或下一页。
支持文字的缩放。
允许链接文档中的内部或外部链接。
可添加彩色的tabs作为书签。
直接从DOM中加载，不使用iFrame。

注意：如果是在本地查看TouchPDF插件，你需要将文件放置在本地服务器上，不要使用file:// url的方式来打开PDF文件。

使用方法

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的高度依赖以字符的多少