使用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为例

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

 

3.1、最简单的应用

效果：

 

 

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

3.3、效果2：在指定位置（当指定位置为局部时）浏览PDF

效果：

 

 

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

效果：

 

 

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

 

 

▍我是尾巴

 

简单实用，不可多得。