插件描述:
这是一个 JavaScript 库用来在 html 中动态嵌入 PDF 文档,使用 <embed> 标签显示 PDF 文档
使用步骤:
1、下载 pdfobject.js
GitHub 下载:https://github.com/pipwerks/PDFObject/
2、在需要使用的 html 页面引入 pdfobject.js 或 pdfobject.min.js
<script type="text/javascript" src="js/pdfobject.min.js"></script>
3、在 html 页面定义一个容器用于显示预览的 PDF 文档
<div id="example1"></div>
4、在 JavaScript 中使用 PDFObject.js
第一种:简单的使用
PDFObject.embed("my.pdf");
第二种:指定位置显示
PDFObject.embed("my.pdf", "#example1");
第三种:指定位置,并携带浏览参数
var options = {
pdfOpenParams: {view: 'FitV'},
fallbackLink: '您的浏览器暂不支持pdf'
}
PDFObject.embed("my.pdf", "#example1", options);
5、可以选择使用 CSS 更改包容 PDF 文档容器的外观,例如:高度、宽度、边框、边距等,类名固定为 pdfobject-container
.pdfobject-container { height: 30rem; border: 1rem solid rgba(0,0,0,.1); }
属性和方法介绍:
【属性】检测是不是支持嵌入 PDF 文档:返回 true 或 false,基于 navigator.mimeTypes['application/pdf'] 和 检测到 AcroPDF.PDF 或 PDF.PdfCtrl
var bol = PDFObject.supportsPDFs;
【属性】检测 PDFObject 的版本
var version = PDFObject.pdfobjectversion;//"2.0.20160402"
【方法】返回嵌入的元素,如果无法嵌入则返回 false,该 embed() 方法是 PDFOject 的核心,提供大量的功能和灵活性。
PDFObject.embed(url [string], target [mixed], options [object])
url 参数说明:pdf 文档的地址,相对地址或绝对地址
target 参数说明:接受 css 选择器、html 节点、jquery 对象
//css 选择器
PDFObject.embed("myfile.pdf", "#my-container");
//html 节点
var mynode = document.getElementById("someID");
PDFObject.embed("myfile.pdf", mynode);
//jquery 对象
var $node = $("#someID");
PDFObject.embed("myfile.pdf", $node);
options 参数说明:提供了很大的灵活性
选项 | 类型 | 说明 | |
page | string / number | 打开 PDF 文档时指定显示的页码 默认值:null | |
id | string | 指定生成的 <embed> 元素的 ID 默认值:null | |
width | string | 指定 <embed> 元素的 style 属性的内联样式,支持所有单位:px、%、em 、rem 默认值:"100%" | |
height | string | 指定 <embed> 元素的 style 属性的内联样式,支持所有单位:px、%、em 、rem 默认值:"100%" | |
fallbackLink | string / boolean | 当浏览器不支持嵌入 PDF 文档时,目标元素输出提示内容 当使用 false 时将禁用后备文本选项,并防止 PDFOject 插入后备文本 默认值:"<p>This browser does not support inline PDFs. Please download the PDF to view it: <a href='[url]'>Download PDF</a></p>" | |
pdfOpenParams | object | 允许您指定 Adobe 的 PDF 打开参数 默认值:null | |
PDFJS_URL | string | 指定引入的 PDF.js 的 PDF 查看器的 viewer 访问路径 默认值:null | |
forcePDFJS | boolean | 是否强制使用 PDF.js 来渲染,而不管浏览器的默认 PDF 阅读器 默认值:false | |
assumptionMode | boolean | 为true 时,PDFObject 将检查浏览器是否被认为是现代的。如果是,则 PDFObject 会假定 PDF 支持可用,将绕过其正常的 PDF 支持检测,并将 PDF 嵌入代码写入页面;不被认为是现代的浏览器将恢复为默认的 PDFObject 行为,在尝试插入 PDF 嵌入代码之前,将执行一次检查以查看是否支持 PDF 嵌入。如果检测到 PDF 支持,则将继续嵌入。如果不是,则将应用正常的后备行为。 默认值:true |
pdfOpenParams 对象参数说明:
选项 | 说明 |
nameddest=name | 在 PDF 中指定命名目的 |
page=pagenum | 页码 例:page=2 |
comment=commentID | 在 PDF 中给定页面上指定注释,page 选项要在此之前使用 |
zoom=scale zoom=scale,left,top | 使用浮点或整数值设置缩放和滚动系数 例:zoom=200 zoom=100,0,0 |
view=Fit view=FitH view=FitH,top view=FitV view=FitV,left view=FitB view=FitBH view=FitBH,top view=FitBV view=FitBV,left | 使用 PDF 语言规范中定义的关键字设置显示页面的视图 滚动值的左和上是坐标系统中的浮点数或整数,其中 0,0 表示可见页面的左上角,与文档旋转无关 page 选项要在此之前使用 注意:命令行不支持
|
viewrect=left,top,wd,ht | 在坐标系中使用浮点或整数值设置视图矩形,其中 0,0 表示可见页面的左上角,而不考虑文档旋转 page 选项要在此之前使用 注意:命令行不支持 |
pagemode=none | 侧边栏状态,显示书签或缩略图 接受值:none,thumbs,bookmarks,attachments |
scrollbar=1|0 | 打开或关闭滚动条 |
search=wordList | 打开搜索用户界面,并搜索文档中的指定单词列表,匹配的单词在文档中突出显示。 这些词必须用引号引起来,并用空格分隔:search="word1 word2" |
statusbar=1|0 | 打开或关闭状态栏 |
messages=1|0 | 打开或关闭文档消息栏 |
navpanes=1|0 | 打开或关闭导航空格和选项卡 |
highlight=lt,rt,top,btm | 在显示的页面上突出显示指定的矩形 矩形值是坐标系统中的整数,其中 0,0 表示可见页面的左上角,与文档旋转无关 page 选项要在此之前使用 |
help=index|contents|search | 仅在从命令行或 Apple Event 打开文件时使用 在 “帮助”窗口中打开文档,并选择指定的导航面板 |
fdf=URL | 指定一个 FDF 文件,该文件用于填充要打开的 PDF 文件中的表单字段 注意:fdf 参数应在 URL 中最后指定 |
collab=setting | 设置用于存储和提供文档注释的协作存储 这将覆盖审阅的默认评论服务器或默认首选项 |