为了账号安全,请及时绑定邮箱和手机立即绑定

手机web预览pdf文档解决方案之pdf5.js

2019.09.06 11:05 5142浏览

效果图:

http://img1.sycdn.imooc.com/5d71c764000190a503840663.jpg

使用pdf5.js插件完成效果。

html部分:

<div class="pdfjs"></div>
<div class="pdfjs2"></div>

js 部分

var url = 'test1.pdf';
var pdfh5 = new Pdfh5('.pdfjs' , {
    pdfurl:url
})
pdfh5.on("renderPages",function(currentPageDom){
    //监听当前加载的pdf页数,currentPageDom当前加载的pdf的dom,currentNum当前加载的pdf页数,
    // console.log(this.currentNum)
    // console.log(pdfh5.currentNum)
 })

还要引入pdf5.css

<link rel="stylesheet" href="css/pdfh5.css"/>

pdf5其他用法:

pdf5监听发

//新增on方法,监听各种事件
 pdfh5.on("start",function(str){
     console.log(str)
 })
 pdfh5.on("complete",function(str){
     pdfh5.scrollEnable(true)
 })

pdfh5.scrollEnable(true)允许pdf滚动,

pdfh5.scrollEnable(false)不允许pdf滚动


//pdfh5还有pdfh5开始初始化、pdfh5加载完成、PDF加载失败、PDF加载成功事件:   pdfh5.start pdfh5.complete pdfh5.error pdfh5.success

//pdfh5还有还原事件、销毁事件(附带回调函数):   pdfh5.reset pdfh5.destroy

//pdfh5还有静态参数:

//pdf最外层div pdfh5.container

//pdf第二层div pdfh5.viewerContainer

//所有包裹pdf的div的父div pdfh5.viewer

//所有包裹pdf的div pdfh5.pages

//pdf加载完成状态 pdfh5.pdfLoaded

//pdf总页数 pdfh5.totalNum

//pdf当前页数 pdfh5.currentNum

//pdfh5初始化的时间戳 pdfh5.initTime


pdf5介绍:

pdf5是移动端pdf插件 预览pdf 展示pdf 在线打开pdf-pdfh5.js

只适用于移动端。

插件式基于pdf.js和jquery的。可以手势缩放。

new Pdfh5(selector,options) 

options可以不填:new Pdfh5(selector),不设置pdf路径,会默认拿地址栏的?file=后面的pdf路径


点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消