使用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.pdfPDFObject.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.pdfPDFObject.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.pdfPDFObject.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、目前我了解到的切实有用的大致就只有以上这些了

▍我是尾巴

简单实用，不可多得。

使用pdfobject.js实现在线浏览PDF相关推荐

前端使用pdf.js插件在线浏览pdf
vue中使用PDF.js_没理由的花呗的博客-CSDN博客_pdf.js vue 步骤 1.官网下载pdf.js插件放入一个公用方法文件夹中如utils 2.在需要使用的页面使用iframe标签 &l ...
网站开发之ie下在线浏览pdf文件无需本地支持
1.首先,务必通过后面给的链接了解一些可实现的方法:打开链接. 2.个人选择了PDFObject+PDF.js来实现,这里需要下载pdfobject.js和PDF.js.对于pdfobject.js, ...
IE上在线浏览PDF
工作中遇到在IE中,在线显示PDF的需求,项目采用的是SpringMvc. 这里有二种情况,一是在jsp中显示pdf,还有一种就是html中显示PDF.运用所遇到的问题是在html中显示PDF,针对I ...
8个实现在线浏览PDF文件的实用jQuery插件
在web开发当中我们经常需要进行需要在线浏览PDf内容,在线嵌入动态pdf,传统的解决方法安装客户端PDF阅读器,如果是在谷歌是可以在线浏览的,因为他自身就带了一些插件,以前遇到这样的问题往往是费时又 ...
微信公众号或者浏览器实现在线浏览pdf文件
微信公众号或者浏览器实现在线浏览pdf文件实现在线浏览pdf文件方法开发步骤: 实现在线浏览pdf文件方法我们在日常的开发当中经常需要实现pdf文件的显示,最近做了一个在微信公众号中实现pdf浏 ...
pdf.js 在线浏览pdf组件构建与安装注意事项
为什么80%的码农都做不了架构师?>>> 1.简介 PDF.js 是基于开放的 HTML5 及 JavaScript 技术实现的开源产品. pdf.js 是一个主要用于HTML ...
在线浏览PDF之PDF.JS （附demo）
摘要: 平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html#skill 下载地址:http://mozilla. ...
基于ASP.NET MVC 利用(Aspose+Pdfobject.js) 实现在线预览Word、Excel、PPT、PDF文件
详细链接:https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak VS2010版本以及以上版本源码下载 ...
在线浏览pdf doc html,前端实现在线预览pdf、word、xls、ppt等文件
1.前端实现pdf文件在线预览功能方式一: 通过a标签href属性实现 pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面.在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签hr ...
html在线浏览pdf文件
最近在做一个项目,其中涉及到pdf文件,于是就想试着在线加载pdf文件,经过我的不懈努力,终于让我解决了这个问题解决这个问题总共有两种方式方式一. 将pdf转为图片保存,然后再把图片的地址发到页面 ...

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

使用pdfobject.js实现在线浏览PDF相关推荐

最新文章

热门文章