-
Notifications
You must be signed in to change notification settings - Fork 240
/
pdf.html
166 lines (149 loc) · 5.64 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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!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="msapplication-tap-highlight" content="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" />
<link href="https://www.gjtool.cn/download/pdfh5.png" type="image/x-icon" rel="shortcut icon" />
<style>
html,
body {
width: 100%;
height: 100%;
}
#demo {
display: none;
/* height: 33%; */
}
#demo2 {
/* display: none; */
height: 33%;
}
#demo3 {
/* display: none; */
height: 33%;
}
</style>
</head>
<body>
<div id="app">
<div class="text-wrapper">
<div class="text part1">
<div>
<span class="letter">
<div class="character">L</div> <span></span>
</span>
<span class="letter">
<div class="character">o</div> <span></span>
</span>
<span class="letter">
<div class="character">a</div> <span></span>
</span>
<span class="letter">
<div class="character">d</div> <span></span>
</span>
<span class="letter">
<div class="character">i</div> <span></span>
</span>
<span class="letter">
<div class="character">n</div> <span></span>
</span>
<span class="letter">
<div class="character">g</div> <span></span>
</span>
</div>
</div>
<div class="how-to"><span>正在加载中，请您耐心等待...</span></div>
</div>
</div>
<div id="demo"></div>
<script src="js/pdf.js"></script>
<script src="js/pdf.worker.js"></script>
<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/pdfh5.js" type="text/javascript" charset="utf-8"></script>
<script src="./vconsole.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
var vConsole = new VConsole();
console.log('Hello world');
var pdfh5;
$("#app").remove();
$("#demo").show();
pdfh5 = new Pdfh5('#demo', {
pdfurl: "git.pdf",
// renderType: "svg",
// cMapUrl:"https://unpkg.com/pdfjs-dist@2.7.570/cmaps/",
// responseType: "blob" // blob arraybuffer
});
pdfh5.on("complete", function (status, msg, time) {
console.log("状态：" + status + "，总耗时：" + time + "毫秒，总页数：" + this.totalNum, msg);
});
// pdfh5.on("scroll", function (scrollTop, currentNum) {
// console.log("scrollTop:"+scrollTop,"currentNum:"+currentNum);
// });
//配置项参数 renderType:"svg" 渲染模式为svg，默认canvas
// var pdfh5 = new Pdfh5('#demo', {
// pdfurl: "./default.pdf",
// renderType:"svg"
// });
//配置项参数 URIenable:true 开启获取地址栏file参数，获取地址栏pdf路径?file=xxx.pdf，默认false不开启
// 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还原、销毁（附带回调函数）： pdfh5.reset pdfh5.destroy
//pdfh5显示、隐藏（附带回调函数）： pdfh5.show pdfh5.hide
//pdf准备开始渲染，此时可以拿到pdf总页数
// pdfh5.on("ready", function() {
// console.log("pdf准备开始渲染，总页数：" + this.totalNum)
// })
//监听pdf渲染失败
// pdfh5.on("error", function (time) {
// console.log("渲染失败，总耗时" + time + "毫秒")
// })
//监听完成事件，加载失败、渲染成功都会触发
// pdfh5.on("complete", function(status, msg, time) {
// console.log("状态：" + status + "，总耗时：" + time + "毫秒，总页数：" + this.totalNum, msg)
// })
//监听渲染中事件
// pdfh5.on("render", function(currentNum, time, currentPageDom) {
// // currentPageDom.append("<span class='name-logo'>张三</span>")
// console.log("当前页码：" + currentNum)
// })
//on方法,监听事件： 开始初始化 init 准备渲染pdf ready 加载完成 complete 加载失败 error 加载成功 success 渲染pdf中 render
// 缩放zoom 滚动scroll 显示show 隐藏hide 还原reset 销毁destroy 允许缩放zoomEnable 允许滚动scrollEnable
//pdfh5支持在线预览
//http://www.gjtool.cn/pdfh5/pdf.html?file=http://www.gjtool.cn/pdfh5/default.pdf
</script>
</body>
</html>