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

https://blog.csdn.net/i_dont_know_a/article/details/80707963

闲来无事,就翻看了一个同学的作品,作品中有一个展示他的简历的页面,简历写在一个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为例

3、应用框架并实现在线浏览PDF的效果

3.1、最简单的应用

                   在线浏览PDF                                     效果:

3.2、效果1:在指定位置(当指定位置为全局时)浏览PDF,最终效果类似3.1,不做演示

                   在指定div中浏览PDF                                            
                                3.3、效果2:在指定位置(当指定位置为局部时)浏览PDF                    在指定div中浏览PDF                                            
                                效果:

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

                   在指定div中浏览PDF                                            
                                效果:

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

▍我是尾巴

简单实用,不可多得。

————————————————
版权声明:本文为CSDN博主「公众号:前端进阶笔记」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/i_dont_know_a/java/article/details/80707963

posted @ 2020-05-11 10:01  乌卡拉卡  阅读(700)  评论(0编辑  收藏  举报