特效介绍
pdfobject.js是一款非常优秀的在线PDF浏览插件,能够打开本地或线上的PDF文件,并且支持显示指定页码,全屏显示或者显示在对应的位置,打开的PDF支持缩放、全屏、打印等功能。我爱模板网的项目中也用到了这个插件,非常不错。效果如下:使用方法
1.pdfobject.js官网:https://pdfobject.com/2.在html文件中引入这个文件,以pdfobject.min.js为例
效果1:全局浏览PDF,最终效果类似3.1,不做演示
01 | <!DOCTYPE html> |
02 | < html > |
03 | < head > |
04 | < meta charset = "UTF-8" > |
05 | < title >在指定div中浏览PDF</ title > |
06 | <!--在此引入bootstrap只为初始化样式div样式--> |
07 | < link rel = "stylesheet" href = "css/bootstrap.min.css" /> |
08 | < style > |
09 | /* 添加样式是为了实现全屏效果 */ |
10 | html,body{ |
11 | height: 100%; |
12 | overflow: hidden; |
13 | } |
14 | |
15 | #example1{ |
16 | height: 100%; |
17 | } |
18 | |
19 | .pdfobject-container{ |
20 | /* height: 500px; */ |
21 | } |
22 | |
23 | .pdfobject{ |
24 | /* border: 1px solid #666; */ |
25 | } |
26 | </ style > |
27 | </ head > |
28 | |
29 | < body > |
30 | < div id = "example1" ></ div > |
31 | |
32 | < script type = "text/javascript" src = "js/pdfobject.min.js" ></ script > |
33 | < script > |
34 | // 我的pdf文件放在项目的pdf文件夹下,名字叫做Java.pdf |
35 | PDFObject.embed("pdf/Java.pdf", "#example1"); |
36 | </ script > |
37 | </ body > |
38 | </ html > |
效果2:在指定位置(当指定位置为局部时)浏览PDF
01 | <!DOCTYPE html> |
02 | < html > |
03 | < head > |
04 | < meta charset = "UTF-8" > |
05 | < title >在指定div中浏览PDF</ title > |
06 | <!--在此引入bootstrap只为初始化样式div样式--> |
07 | < link rel = "stylesheet" href = "css/bootstrap.min.css" /> |
08 | < style > |
09 | html,body{ |
10 | height: 100%; |
11 | overflow: hidden; |
12 | /* 添加背景颜色是为了方便查看整个body范围 */ |
13 | background-color: cornflowerblue; |
14 | } |
15 | |
16 | #example1{ |
17 | /* 设置放置PDF的div的样式 */ |
18 | height: 50%; |
19 | width: 50%; |
20 | } |
21 | |
22 | /* PDF容器样式 */ |
23 | .pdfobject-container{ |
24 | /* height: 500px; */ |
25 | } |
26 | |
27 | /* PDF样式 */ |
28 | .pdfobject{ |
29 | /* border: 1px solid #666; */ |
30 | } |
31 | </ style > |
32 | </ head > |
33 | |
34 | < body > |
35 | < div id = "example1" ></ div > |
36 | |
37 | < script type = "text/javascript" src = "js/pdfobject.min.js" ></ script > |
38 | < script > |
39 | // 我的pdf文件放在项目的pdf文件夹下,名字叫做Java.pdf |
40 | PDFObject.embed("pdf/Java.pdf", "#example1"); |
41 | </ script > |
42 | </ body > |
43 | </ html > |
效果3:指定从多少页开始阅读(必须同时指定显示PDF的div)
01 | <!DOCTYPE html> |
02 | < html > |
03 | < head > |
04 | < meta charset = "UTF-8" > |
05 | < title >在指定div中浏览PDF</ title > |
06 | <!--在此引入bootstrap只为初始化样式div样式--> |
07 | < link rel = "stylesheet" href = "css/bootstrap.min.css" /> |
08 | < style > |
09 | /* 添加样式是为了实现全屏效果 */ |
10 | html,body{ |
11 | height: 100%; |
12 | overflow: hidden; |
13 | } |
14 | |
15 | #example1{ |
16 | height: 100%; |
17 | } |
18 | |
19 | .pdfobject-container{ |
20 | /* height: 500px; */ |
21 | } |
22 | |
23 | .pdfobject{ |
24 | /* border: 1px solid #666; */ |
25 | } |
26 | </ style > |
27 | </ head > |
28 | |
29 | < body > |
30 | < div id = "example1" ></ div > |
31 | |
32 | < script type = "text/javascript" src = "js/pdfobject.min.js" ></ script > |
33 | < script > |
34 | // 我的pdf文件放在项目的pdf文件夹下,名字叫做Java.pdf,指定PDF从20页开始阅读 |
35 | PDFObject.embed("pdf/Java.pdf", "#example1", {page: "20"}); |
36 | </ script > |
37 | </ body > |
38 | </ html > |