首页 > 特效插件 > 其他特效 >  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,不做演示
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>在指定div中浏览PDF</title>
        <!--在此引入bootstrap只为初始化样式div样式-->
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <style>
            /* 添加样式是为了实现全屏效果 */
            html,body{
                height: 100%;
                overflow: hidden;
            }
             
            #example1{
                height: 100%;
            }
             
            .pdfobject-container{
                /* height: 500px; */
            }
             
            .pdfobject{
                /* border: 1px solid #666; */
            }
        </style>
    </head>
     
    <body>
        <div id="example1"></div>
             
        <script type="text/javascript" src="js/pdfobject.min.js"></script>
        <script>
            // 我的pdf文件放在项目的pdf文件夹下,名字叫做Java.pdf
            PDFObject.embed("pdf/Java.pdf", "#example1");
        </script>
    </body>
</html>


效果2:在指定位置(当指定位置为局部时)浏览PDF
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>在指定div中浏览PDF</title>
        <!--在此引入bootstrap只为初始化样式div样式-->
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <style>
            html,body{
                height: 100%;
                overflow: hidden;
                /* 添加背景颜色是为了方便查看整个body范围 */
                background-color: cornflowerblue;
            }
             
            #example1{
                /* 设置放置PDF的div的样式 */
                height: 50%;
                width: 50%;
            }
             
            /* PDF容器样式 */
            .pdfobject-container{
                /* height: 500px; */
            }
             
            /* PDF样式 */
            .pdfobject{
                /* border: 1px solid #666; */
            }
        </style>
    </head>
     
    <body>
        <div id="example1"></div>
             
        <script type="text/javascript" src="js/pdfobject.min.js"></script>
        <script>
            // 我的pdf文件放在项目的pdf文件夹下,名字叫做Java.pdf
            PDFObject.embed("pdf/Java.pdf", "#example1");
        </script>
    </body>
</html>


效果3:指定从多少页开始阅读(必须同时指定显示PDF的div)
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>在指定div中浏览PDF</title>
        <!--在此引入bootstrap只为初始化样式div样式-->
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <style>
            /* 添加样式是为了实现全屏效果 */
            html,body{
                height: 100%;
                overflow: hidden;
            }
             
            #example1{
                height: 100%;
            }
             
            .pdfobject-container{
                /* height: 500px; */
            }
             
            .pdfobject{
                /* border: 1px solid #666; */
            }
        </style>
    </head>
     
    <body>
        <div id="example1"></div>
             
        <script type="text/javascript" src="js/pdfobject.min.js"></script>
        <script>
            // 我的pdf文件放在项目的pdf文件夹下,名字叫做Java.pdf,指定PDF从20页开始阅读
            PDFObject.embed("pdf/Java.pdf", "#example1", {page: "20"});
        </script>
    </body>
</html>