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