使用pdfobject.js实现在线浏览PDF

绝地灬酷狼 2022-05-22 05:09 253阅读 0赞

闲来无事，就翻看了一个同学的作品，作品中有一个展示他的简历的页面，简历写在一个PDF中。

然后在页面中直接显示出来了，可以下载，还可以打印，这个技术我还没有尝试过呢。

正好想弄点新鲜玩意儿玩玩，忽然想起前段时间我也收藏过关于这个技术的几篇博客，就把这几篇收藏打开，看看怎么实现这个效果。

▍特点

1、能自由选择需要浏览的页面

![70][]

2、从左至右依次为PDF转向、下载、打印、查看目录（这款插件能自动识别PDF目录，并且根据目录进行快速访问）

![70 1][]

3、调整PDF大小

![70 2][]

▍框架

几乎所有的博客都写到了一个叫做pdfobject.js的框架，所以我也在官网下载了这个js框架。

官网：https://pdfobject.com/

▍操作步骤及代码

1、下载js框架

1.1、打开官网：https://pdfobject.com/

![70 3][]

1.2、下载框架

![70 4][]

1.3、文件目录如下，至此，第一步完成

![70 5][]

2、部署js框架

2.1、将pdfobject.js或pdfobject.min.js放入项目存放js文件的文件夹中

![70 6][]

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

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>

效果：

![70 7][]

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

<!DOCTYPE html> <html>    <head>        <meta charset="UTF-8">        <title>在指定div中浏览PDF</title>                <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>                <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>

效果：

![70 8][]

3.4、效果3：指定从多少页开始阅读（必须同时指定显示PDF的div）

<!DOCTYPE html> <html>    <head>        <meta charset="UTF-8">        <title>在指定div中浏览PDF</title>                <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>

效果：

![70 9][]

4、目前我了解到的切实有用的大致就只有以上这些了

▍我是尾巴

简单实用，不可多得。

![关注微信公众号：爱唱歌的蜗牛先生][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfZG9udF9rbm93X2E_size_16_color_FFFFFF_t_70]

[70]: /images/20220522/ea64add40942473ea2921394f2ab941c.png
[70 1]: /images/20220522/f93913a69d8e484c8a1cbd3e1a812c29.png
[70 2]: /images/20220522/4f72dc8f3ab249568aea862e7d194c84.png
[70 3]: /images/20220522/f93e9657922946879b4e87603449f7ea.png
[70 4]: /images/20220522/b9cc6c2981604ff3bd0744e841ad412c.png
[70 5]: /images/20220522/f1078fc6d9fb4e64843a6782a83e31b6.png
[70 6]: /images/20220522/ec2c4b2347554ada937fcd602e69ac5c.png
[70 7]: /images/20220522/5a9b7e3eb0804a3d89fa7c8aaa765f7a.png
[70 8]: /images/20220522/3471a3d33e5b4c0d86b4a1e34ae420c1.png
[70 9]: /images/20220522/13e275dafdff4cfc804244843a5a921c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfZG9udF9rbm93X2E_size_16_color_FFFFFF_t_70]: /images/20220522/e09b3196c026478aaeb0158d18c93cd5.png