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