pdf.js移動端展示預(yù)覽打開pdf-pdfh5.js
本插件基于pdf.js和jQuery柑晒，可手勢捏合縮放，支持懶加載（即分段加載）诱渤。
2019.07.18更新：增加npm install pdfh5使用方式寡夹，適應(yīng)于vue，使用方式和api見github https://github.com/gjTool/pdfh5钳降。
2019.07.17更新：新增配置參數(shù)lazy厚宰，支持懶加載腌巾。
2019.07.10更新：新增部分api，配置參數(shù)铲觉。內(nèi)部渲染機(jī)制改動：先畫canvas再轉(zhuǎn)為img 改成 直接渲染svg澈蝙。后續(xù)會放出api文檔。以及做成npm包引用（時間待定）
實(shí)例化：new Pdfh5(selector,options)
options可以不填：new Pdfh5(selector）,不設(shè)置pdf路徑撵幽，會默認(rèn)拿地址欄的?file=后面的pdf路徑
例如：http://www.gjtool.cn/pdfh5/pdf.html?file=http://xxx.xxx.xxx/xxx.pdf
var pdfh5 = new Pdfh5('.pdfjs', { pdfurl: 'default.pdf' });
默認(rèn)優(yōu)先獲取瀏覽器地址欄灯荧？file=后面的地址，如果地址欄沒有盐杂，再拿配置項(xiàng)的pdfurl或者data來渲染pdf逗载。
配置項(xiàng)參數(shù) URIenable:false 可以無視地址欄參數(shù)，只拿配置項(xiàng)的pdfurl或者data來渲染pdf
var pdfh5 = new Pdfh5('.pdfjs', {
URIenable:false,
pdfurl: "./default.pdf"
});
例子：
html代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title>PDFH5</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/pdfh5.css" />
</head>
<body>
<div id="demo"></div>
<script src="js/pdf.js" type="text/javascript" charset="utf-8"></script>
<script src="js/pdf.worker.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/pdfh5.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//當(dāng)前默認(rèn)優(yōu)先獲取瀏覽器地址欄链烈？file=后面的地址厉斟，如果地址欄沒有，再拿配置項(xiàng)的pdfurl或者data來渲染pdf
//優(yōu)先順序： 强衡？file= > pdfurl > data
var pdfh5 = new Pdfh5('#demo', {
pdfurl: "./default.pdf"
});
//配置項(xiàng)參數(shù) lazy:true 開啟懶加載擦秽，默認(rèn)是false,不開啟懶加載
// var pdfh5 = new Pdfh5('#demo', {
// pdfurl: "./default.pdf",
// lazy:true
// });
//配置項(xiàng)參數(shù) URIenable:false 可以無視地址欄參數(shù)，只拿配置項(xiàng)的pdfurl或者data來渲染pdf
// var pdfh5 = new Pdfh5('#demo', {
// URIenable:false,
// pdfurl: "./default.pdf"
// });
//pdf準(zhǔn)備開始渲染漩勤，此時可以拿到pdf總頁數(shù)
pdfh5.on("ready", function () {
console.log("總頁數(shù)：" + this.totalNum)
})
//監(jiān)聽pdf渲染過程感挥，currentPageDom當(dāng)前加載的pdf的dom,currentNum當(dāng)前加載的pdf頁數(shù),
pdfh5.on("render", function (currentNum, time, currentPageDom) {
console.log("當(dāng)前渲染頁：" + currentNum + "，耗時：" + time + "毫秒")
})
//監(jiān)聽完成事件越败，加載失敗触幼、渲染成功都會觸發(fā)
pdfh5.on("complete", function (status, msg, time) {
console.log("狀態(tài)：" + status + "，信息：" + msg + "究飞，耗時：" + time + "毫秒域蜗，總頁數(shù)：" + this.totalNum)
})
//監(jiān)聽pdf渲染成功
pdfh5.on("success", function (time) {
console.log("加載完成巨双，耗時" + time + "毫秒")
})
//配置項(xiàng)參數(shù) 是否顯示小部件 加載進(jìn)度loadingBar 頁面顯示pageNum 回到頂部backTop 默認(rèn)顯示
// var pdfh5 = new Pdfh5('#demo', {
// loadingBar: false,
// pageNum:false,
// backTop:false
// });
//配置項(xiàng)參數(shù)data，文件流形式傳入 pdfurl和data二選一
// var pdfh5 = new Pdfh5('#demo', {
// data: data
// });
//配置項(xiàng)參數(shù)scrollEnable:false不允許pdf滾動,true允許pdf滾動 默認(rèn)允許
// var pdfh5 = new Pdfh5('#demo', {
// scrollEnable:false,//是否允許pdf滾動
// pdfurl: url
// });
//pdfh5.scrollEnable(true)允許pdf滾動,pdfh5.scrollEnable(false)不允許pdf滾動
//配置項(xiàng)參數(shù)zoomEnable:false不允許pdf手勢縮放,true允許pdf手勢縮放 默認(rèn)允許
// var pdfh5 = new Pdfh5('#demo', {
// zoomEnable:false,//是否允許pdf滾動
// pdfurl: url
// });
//pdfh5.zoomEnable(true)允許pdf手勢縮放霉祸，pdfh5.zoomEnable(false)不允許pdf手勢縮放
//pdfh5還原筑累、銷毀（附帶回調(diào)函數(shù)）： pdfh5.reset pdfh5.destroy
//pdfh5顯示、隱藏（附帶回調(diào)函數(shù)）： pdfh5.show pdfh5.hide
//on方法,監(jiān)聽各種事件： 開始初始化 init 準(zhǔn)備渲染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支持在線預(yù)覽
//http://www.gjtool.cn/pdfh5/pdf.html?file=http://www.gjtool.cn/pdfh5/default.pdf
</script>
</body>
</html>
github地址：https://github.com/gjTool/pdfh5
示例地址：http://www.gjtool.cn/pdfh5/
如果需要在線預(yù)覽丝蹭，那就把github上的項(xiàng)目下載慢宗，部署到自己的服務(wù)器上。
也可以用下面的地址在線預(yù)覽奔穿，修改?file=后面的地址即可：
http://www.gjtool.cn/pdfh5/pdf.html?file=http://www.gjtool.cn/pdfh5/test.pdf
在地址欄最后添加?file="PDF文件的地址"
示例用法：
http://www.gjtool.cn/pdfh5/pdf.html?file=http://xxx.xxx.xxx/xxx.pdf
有問題BUG镜沽，請去GitHub上提Issue。https://github.com/gjTool/pdfh5/issues
項(xiàng)目源碼打包下載???????
如果覺得插件還可以贱田，就請點(diǎn)個星星吧缅茉，以后有空我會更新api文檔，完善插件功能
最近才算閑下來了男摧，新建了一個QQ前端學(xué)習(xí)交流群蔬墩，歡迎加入前端交流h5，651601340耗拓，可以進(jìn)來提pdfh5.js的bug拇颅、問題、建議等乔询。
