1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > 手机端html5展示pdf pdf.js移动端展示预览打开pdf-pdfh5.js

手机端html5展示pdf pdf.js移动端展示预览打开pdf-pdfh5.js

时间:2024-03-31 20:29:40

相关推荐

手机端html5展示pdf pdf.js移动端展示预览打开pdf-pdfh5.js

pdf.js移动端展示预览打开pdf-pdfh5.js

本插件基于pdf.js和jQuery,可手势捏合缩放,支持懒加载(即分段加载)。

.07.18更新:增加npm install pdfh5使用方式,适应于vue,使用方式和api见github

.07.17更新:新增配置参数lazy,支持懒加载。

.07.10更新:新增部分api,配置参数。内部渲染机制改动:先画canvas再转为img 改成 直接渲染svg。后续会放出api文档。以及做成npm包引用(时间待定)

实例化:new Pdfh5(selector,options)

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

var pdfh5 = new Pdfh5('.pdfjs', { pdfurl: 'default.pdf' });

默认优先获取浏览器地址栏?file=后面的地址,如果地址栏没有,再拿配置项的pdfurl或者data来渲染pdf。

配置项参数 URIenable:false 可以无视地址栏参数,只拿配置项的pdfurl或者data来渲染pdf

var pdfh5 = new Pdfh5('.pdfjs', {

URIenable:false,

pdfurl: "./default.pdf"

});

例子:

html代码:

PDFH5

//当前默认优先获取浏览器地址栏?file=后面的地址,如果地址栏没有,再拿配置项的pdfurl或者data来渲染pdf

//优先顺序: ?file= > pdfurl > data

var pdfh5 = new Pdfh5('#demo', {

pdfurl: "./default.pdf"

});

//配置项参数 lazy:true 开启懒加载,默认是false,不开启懒加载

// var pdfh5 = new Pdfh5('#demo', {

// pdfurl: "./default.pdf",

// lazy:true

// });

//配置项参数 URIenable:false 可以无视地址栏参数,只拿配置项的pdfurl或者data来渲染pdf

// var pdfh5 = new Pdfh5('#demo', {

// URIenable:false,

// pdfurl: "./default.pdf"

// });

//pdf准备开始渲染,此时可以拿到pdf总页数

pdfh5.on("ready", function () {

console.log("总页数:" + this.totalNum)

})

//监听pdf渲染过程,currentPageDom当前加载的pdf的dom,currentNum当前加载的pdf页数,

pdfh5.on("render", function (currentNum, time, currentPageDom) {

console.log("当前渲染页:" + currentNum + ",耗时:" + time + "毫秒")

})

//监听完成事件,加载失败、渲染成功都会触发

pdfh5.on("complete", function (status, msg, time) {

console.log("状态:" + status + ",信息:" + msg + ",耗时:" + time + "毫秒,总页数:" + this.totalNum)

})

//监听pdf渲染成功

pdfh5.on("success", function (time) {

console.log("加载完成,耗时" + time + "毫秒")

})

//配置项参数 是否显示小部件 加载进度loadingBar 页面显示pageNum 回到顶部backTop 默认显示

// var pdfh5 = new Pdfh5('#demo', {

// loadingBar: false,

// pageNum:false,

// backTop:false

// });

//配置项参数data,文件流形式传入 pdfurl和data二选一

// var pdfh5 = new Pdfh5('#demo', {

// data: data

// });

//配置项参数scrollEnable:false不允许pdf滚动,true允许pdf滚动 默认允许

// var pdfh5 = new Pdfh5('#demo', {

// scrollEnable:false,//是否允许pdf滚动

// pdfurl: url

// });

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

//配置项参数zoomEnable:false不允许pdf手势缩放,true允许pdf手势缩放 默认允许

// var pdfh5 = new Pdfh5('#demo', {

// zoomEnable:false,//是否允许pdf滚动

// pdfurl: url

// });

//pdfh5.zoomEnable(true)允许pdf手势缩放,pdfh5.zoomEnable(false)不允许pdf手势缩放

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

//pdfh5显示、隐藏(附带回调函数): pdfh5.show pdfh5.hide

//on方法,监听各种事件: 开始初始化 init 准备渲染pdf ready 加载完成 complete 加载失败 error 加载成功 success 渲染pdf中 render

// 缩放zoom 滚动scroll 显示show 隐藏hide 还原reset 销毁destroy 允许缩放zoomEnable 允许滚动scrollEnable

// pdfh5.on("init",function(){

//

// })

// pdfh5.on("ready",function(){

//

// })

// pdfh5.on("complete",function(status,msg,time){

// this.zoomEnable(false)

// })

//pdfh5支持在线预览

///pdfh5/pdf.html?file=/pdfh5/default.pdf

如果需要在线预览,那就把github上的项目下载,部署到自己的服务器上。

也可以用下面的地址在线预览,修改?file=后面的地址即可:

在地址栏最后添加?file="PDF文件的地址"

示例用法:

/pdfh5/pdf.html?file=http://xxx.xxx.xxx/xxx.pdf

如果觉得插件还可以,就请点个星星吧,以后有空我会更新api文档,完善插件功能

最近才算闲下来了,新建了一个QQ前端学习交流群,欢迎加入前端交流h5,651601340,可以进来提pdfh5.js的bug、问题、建议等。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。