forked from gjTool/pdfh5
-
Notifications
You must be signed in to change notification settings - Fork 0
/
pdf.html
139 lines (122 loc) · 5.6 KB
/
pdf.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!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" />
<style>
html,
body {
width: 100%;
height: 100%;
}
</style>
</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">
//当前默认优先获取浏览器地址栏？file=后面的地址，如果地址栏没有，再拿配置项的pdfurl或者data来渲染pdf
//优先顺序： ？file= > pdfurl > data
var pdfh5 = new Pdfh5('#demo', {
pdfurl: "git.pdf"
});
// window.onorientationchange = function () {
// pdfh5.destroy()
// setTimeout(() => {
// pdfh5.init(pdfh5.options)
// }, 2000);
// }
//配置项参数 type:"ajax" 请求方式为ajax，默认fetch
// var pdfh5 = new Pdfh5('#demo', {
// pdfurl: "./default.pdf",
// type:"ajax"
// });
//配置项参数 renderType:"canvas" 渲染模式为canvas，默认svg
// var pdfh5 = new Pdfh5('#demo', {
// pdfurl: "./default.pdf",
// renderType:"canvas"
// });
// 配置项参数 scale:2 渲染的清晰度比例，默认1.3
// var pdfh5 = new Pdfh5('#demo', {
// pdfurl: "./default.pdf",
// renderType:"canvas",
// scale:2
// });
//配置项参数 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"
// });
//配置项参数 是否显示小部件 顶部绿色加载进度条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
//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 + "毫秒")
})
//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支持在线预览
//http://www.gjtool.cn/pdfh5/pdf.html?file=http://www.gjtool.cn/pdfh5/default.pdf
</script>
</body>
</html>