使用pdfobject.js实现在线浏览PDF
1.pdfobject.js官网:https://pdfobject.com/
2.在html文件中引入这个文件,以pdfobject.min.js为例
<script type="text/javascript" src="js/pdfobject.min.js"></script>
效果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>

效果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:指定从多少页开始阅读(必须同时指定显示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>

原文地址:https://i.cnblogs.com/EditPosts.aspx?opt=1
使用pdfobject.js实现在线浏览PDF的更多相关文章
- java实现在线浏览PDF文档功能
实现在线浏览pdf文档功能(本代码适用于项目服务中固定的并且少量的pdf浏览,比如注册时的注册条款在线浏览等): //设置响应内容类型为PDF类型 response.setContentType(&q ...
- https://github.com/Lushenggang/show-pdf在线浏览pdf文件在线浏览pdf文件
在线浏览pdf文件 https://github.com/Lushenggang/show-pdf https://github.com/Lushenggang/show-pdf
- 在线浏览PDF之PDF.JS (附demo)
平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html#skill 下载地址:http://mozilla.gith ...
- Asp.net MVC 利用(aspose+pdfobject.js) 实现在线预览word、excel、ppt、pdf文件
在线预览word.excel.ppt利用aspose动态生成html 主要代码 private bool OfficeDocumentToHtml(string sourceDoc, string s ...
- 在线浏览pdf文件,pdfobject的简单使用
该js插件,官网有详细的使用教程(网址:http://www.pdfobject.com/examples/).打开里面的例子后,查看新打开页面,打开并查看该页面的源代码. 需要的材料: 1.PDFo ...
- 基于ASP.NET MVC 利用(Aspose+Pdfobject.js) 实现在线预览Word、Excel、PPT、PDF文件
#region VS2010版本以及以上版本源码下载地址:http://download.csdn.net/download/u012949335/10231812 VS2012版本以及以上版本源码下 ...
- 怎么用ABBYY在线浏览PDF文件
ABBYY FineReader 让您可以从在线存储服务中打开图像或 PDF 文件,并将已识别文本保存至在线存储服务中,如 Dropbox.SkyDrive 或 Google Drive 等.通过在 ...
- vue 中PDF实现在线浏览,禁止下载,打印
需求:在线浏览pdf文件,并且禁止掉用户下载打印的效果. 分析:普通的iframe.embed标签都只能实现在线浏览pdf的功能,无法禁止掉工具栏的下载打印功能.只能尝试使用插件,pdfobject. ...
- 在线打开,浏览PDF文件的各种方式及各种pdf插件------(MS OneDrive/google drive & google doc/ github ?raw=true)
在线打开,浏览PDF文件的各种方式: 1 Google drive&doc (国内不好使,you know GFW=Great Firewall) 1. google drive: 直接分 ...
随机推荐
- Flater-Provide狀態管理
參考來源:http://www.jspang.com/posts/2019/03/01/flutter-shop.html#%E7%AC%AC24%E8%8A%82%EF%BC%9Aprovide%E ...
- Django【第4篇】:Django之模板继承
jango框架之模板继承和静态文件配置 一.模板继承 目的是:减少代码的冗余 语法: {% block classinfo %} {% endblock %} 具体步骤: 1.创建一个base.htm ...
- LOJ6358 前夕
上来4的倍数又要交集恰好 单位根反演+二项式反演定了( 具体推柿子放下面了qwq $g(n) = \sum_{i=n}^N f(i) \binom{i}{n} \\g(n) = \binom{N}{n ...
- 题解 P3166 【[CQOI2014]数三角形】
做完之后看了看题解,怎么一篇和我思路一样的也没有...我好慌啊qwq(所以一定是窝太弱了看不懂dalao的思路) 好吧窝的方法确实很奇怪: 核心代码只有3行 输入 循环 输出 一气呵成 是题解中的豪杰 ...
- Vue刷新token,判断token是否过期
1.判断token是否过期,前端请求后,后台会返回一个状态给你.根据状态判断是否过期,刷新token 2.是否每次请求后端都会返回新的token给你.或者后端给你定义了一个刷新token的方法,那此时 ...
- 主席树(静态区间第k大)
前言 如果要求一些数中的第k大值,怎么做? 可以先就这些数离散化,用线段树记录每个数字出现了多少次. ... 那么考虑用类似的方法来求静态区间第k大. 原理 假设现在要有一些数 我们可以对于每个数都建 ...
- requiredBackgroundModes
申明需要后台运行的能力,类型为数组.目前支持以下项目: audio: 后台音乐播放如: { "pages": ["pages/index/index"], &q ...
- http协议的深刻理解
https://www.cnblogs.com/mayite/p/9095986.html
- [POJ1637]Sightseeing tour:混合图欧拉回路
分析 混合图欧拉回路问题. 一个有向图有欧拉回路当且仅当图连通并且对于每个点,入度\(=\)出度. 入度和出度相等可以联想到(我也不知道是怎么联想到的)网络流除了源汇点均满足入流\(=\)出流.于是可 ...
- Minimum Cut
Minimum Cut Time Limit: 3000/2000 MS (Java/Others) Memory Limit: 65535/102400 K (Java/Others)Tota ...