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