1. 程式人生 > >使用pdfobject.js實現線上瀏覽PDF

使用pdfobject.js實現線上瀏覽PDF

閒來無事,就翻看了一個同學的作品,作品中有一個展示他的簡歷的頁面,簡歷寫在一個PDF中。

然後在頁面中直接顯示出來了,可以下載,還可以列印,這個技術我還沒有嘗試過呢。

正好想弄點新鮮玩意兒玩玩,忽然想起前段時間我也收藏過關於這個技術的幾篇部落格,就把這幾篇收藏開啟,看看怎麼實現這個效果。

▍特點

1、能自由選擇需要瀏覽的頁面

2、從左至右依次為PDF轉向、下載、列印、檢視目錄(這款外掛能自動識別PDF目錄,並且根據目錄進行快速訪問)

3、調整PDF大小

▍框架

幾乎所有的部落格都寫到了一個叫做pdfobject.js

的框架,所以我也在官網下載了這個js框架。

官網:https://pdfobject.com/

▍操作步驟及程式碼

1、下載js框架

1.1、開啟官網:https://pdfobject.com/

1.2、下載框架

1.3、檔案目錄如下,至此,第一步完成

2、部署js框架

2.1、將pdfobject.js或pdfobject.min.js放入專案存放js檔案的資料夾中

2.2、在html檔案中引入這個檔案,以pdfobject.min.js為例

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

3、應用框架並實現線上瀏覽PDF的效果

3.1、最簡單的應用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>線上瀏覽PDF</title>
    </head>
    
    <body>
    
        <script type="text/javascript" src="js/pdfobject.min.js"></script>
        <script>
            // 我的pdf檔案放在專案的pdf資料夾下,名字叫做Java.pdf
            PDFObject.embed("pdf/Java.pdf");
       </script>    </body> </html>

效果:

3.2、效果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>

3.3、效果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.4、效果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>

效果:

4、目前我瞭解到的切實有用的大致就只有以上這些了

▍我是尾巴

簡單實用,不可多得。