forked from gjTool/pdfh5
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
166 lines (148 loc) · 6.73 KB
/
index.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> <!-- 声明该文档是HTML5文档 -->
<html> <!-- HTML文档的根元素 -->
<head> <!-- 含有文档的元数据（如标题、链接、样式、脚本等） -->
<meta charset="UTF-8"> <!-- 定义文档字符编码为UTF-8 -->
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- 允许iOS Safari将网站保存到主屏幕，并以全屏模式打开 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 设置iOS Safari的状态条样式 -->
<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>李晓鹏 HSKhelper项目细节</title> <!-- 定义文档标题 -->
<link rel="stylesheet" href="css/style.css"/> <!-- 链接外部样式表 -->
<link rel="stylesheet" href="css/pdfh5.css"/> <!-- 链接pdfh5库的样式表 -->
<link href="https://www.gjtool.cn/download/pdfh5.png" type="image/x-icon" rel="shortcut icon"/> <!-- 定义网站图标 -->
<style>
<!-- 内部样式表 -->
html, body {
<!-- 应用到 < html > 和 < body > 元素的样式 --> width: 100%;
<!-- 宽度为100 % --> height: 100%;
<!-- 高度为100 % -->
}
#demo {
<!-- 应用到id为 "demo" 的元素的样式 --> display: none;
<!-- 不显示该元素 -->
}
#demo2 {
<!-- 应用到id为 "demo2" 的元素的样式 --> height: 33%;
<!-- 高度为33 % -->
}
#demo3 {
<!-- 应用到id为 "demo3" 的元素的样式 --> height: 33%;
<!-- 高度为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="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
var pdfh5;
$(function () {
$("#app").remove();
$("#demo").show();
pdfh5 = new Pdfh5('#demo', {
pdfurl: "XiaopengLi.pdf",
// renderType: "svg",
// cMapUrl:"https://unpkg.com/[email protected]/cmaps/",
// responseType: "blob" // blob arraybuffer
});
pdfh5.on("success", function (time) {
time = time / 1000;
console.log("pdf渲染完成，总耗时" + time + "秒");
//禁止手势缩放
pdfh5.zoomEnable(false);
});
// 配置项参数 renderType:"svg" 渲染模式为svg，默认canvas
/* var pdfh5 = new Pdfh5('#demo', {
pdfurl: "./XiaopengLi.pdf",
renderType:"svg"
});*/
//配置项参数 URIenable:true 开启获取地址栏file参数，获取地址栏pdf路径?file=xxx.pdf，默认false不开启
// var pdfh5 = new Pdfh5('#demo', {
// URIenable:false,
// pdfurl: "./XiaopengLi.pdf"
// });
//配置项参数 是否显示小部件 顶部绿色加载进度条loadingBar 左上角页码显示pageNum 右下角回到顶部按钮backTop 默认显示
var pdfh5 = new Pdfh5('#demo', {
loadingBar: true,
pageNum:true,
backTop:true
});
//配置项参数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/index.html?file=http://www.gjtool.cn/pdfh5/XiaopengLi.pdf
})
</script>
</body>
</html>