支持移动触摸的网页版PDF格式文件阅读器插件

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阅读器的可用配置参数有：

每一个Tab都必须使用Json对象格式来定义，可用的TAB属性如下：

TouchPDF插件的github地址为：https://github.com/loicminghetti/touchpdf