PDFObject的使用（转）

1.pdfobject.js官网：https://pdfobject.com/

2.在html文件中引入这个文件，以pdfobject.min.js为例

1 < script  type="text/javascript" src="js/pdfobject.min.js"></ script >

　效果1：在指定位置（当指定位置为全局时）浏览PDF，最终效果类似3.1，不做演示

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 <! 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

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 <! 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范围 */                               }                            #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）

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 <! 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 >

　　

 

原文地址：https://i.cnblogs.com/EditPosts.aspx?opt=1

转自：https://www.cnblogs.com/liyouwu/p/9722590.html

转载于:https://www.cnblogs.com/miaolyou/p/11150906.html