手机端 阅读 pdf 文件 touchPDF.js

touchpdf 中文API

下载地址: http://github.com/loicminghetti/touchpdf/archive/master.zip

一款在手机端 阅读pdf 文件的 js库,能够 通过滑动进行 pdf 预览 翻页 

TouchPDF是一个jQuery插件,它使用pdf.js短语和呈现支持触摸手势和自动页面选项卡的Web PDF查看器。

依赖关系:

PDF.js

jQuery touchSwipe插件

jQuery panzoom插件

jQuery mousewheel插件

特征:

PDF可以使用滚动,两个手指捏,+/-键和工具栏按钮进行缩放。 

PDF可以使用一根手指刷。 

在文档顶部的工具栏,标题,页码和下一页/上一页和缩放的按钮。 

如何使用它:

1.将jQuery TouchPDF的CSS文件加载到文档的头部。

      <link href="jquery.touchPDF.css" rel="stylesheet" />

2.在文档末尾加载jQuery库,jQuery TouchPDF插件和其他必需的资源。

<script  src="pdf.js"></scrip>

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

<script src="jquery.touchSwipe.min.js"></script>

<script src="jquery.touchPDF.js"></script>

<script src="jquery.panzoom.js"></script>

<script src="jquery.mousewheel.js"></script>

3.为Web PDF查看器创建一个DOM元素。

<div id="myPDF"></div>

4.初始化插件并指定要在DOM元素中显示的PDF文件的路径。

$(function(){

$("#myPDF").pdf( {   

      source:"demo.pdf",// MORE SETTINGS HERE

   } );

});

5.插件参数设置

//PathofPDF file to display

source:null,

//Titleofthe PDF to be displayedinthe toolbar

title:"TouchPDF",

//Arrayoftabs to displayonthe side.tabs: [],

//Default background colorforall tabs.//Available colors are"green","yellow","orange","brown",//"blue","white","black"andyou can define your own colorswithCSS.tabsColor:"beige",

//Disable zoomingofPDFdocument.disableZoom:false,

//Disable swipe to next/prev pageofPDFdocument.disableSwipe:false,

//Disable all internalandexternal linksonPDFdocumentdisableLinks:false,

//Disable the arrow keysfornext/previous page and +/-forzoomingdisableKeys:false,

//Force resizeofPDF vieweronwindowresizeredrawOnWindowResize:true,

//Show a toolbarontopofthedocumentwithtitle

,//page numberandbuttonsfornext/prev pagesandzoomingshowToolbar:true

,//A handler triggeredwhenPDFdocumentisloadedloaded:null,

//A handler triggered each time anewpageisdisplayedchanged:null,

//TextorHTML displayedonwhite page shown beforedocumentisloadedloadingHeight:841,

//Heightinpxofwhite page shown beforedocumentisloadedloadingWidth:595,

//Widthinpxofwhite page shown beforedocumentisloadedloadingHTML:"Loading PDF"

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,224评论 19 139
  • 前端组件库 搭建web app常用的样式/组件等收集列表(移动优先) 8. 路由和链接(Routing And U...
    guanguans阅读 2,677评论 0 17
  • fullPage.js A more complex initialization with all option...
    WOTK阅读 2,143评论 0 0
  • 从今天起 做一个灿烂的人 买新的衣服 做新的发型 撕前任的照片 在咖啡店坐下 看看人群 闻闻哪里传来了花香
    药尘尘阅读 146评论 0 0
  • 一、李嘉诚戴的表,是西铁城表。市价1000港元,他已戴了十几年。他戴的眼镜,也用了十几年了,曾因度数增加换过镜片,...
    蒋昊轩阅读 582评论 0 1