首页 > 特效插件 > 其他特效 >  pdfobject.js——一款在线预览PDF的js库正文

pdfobject.js——一款在线预览PDF的js库

特效介绍
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>