在线预览 PDF 文档插件 PDFObject.js

• 插件描述：

这是一个 JavaScript 库用来在 html 中动态嵌入 PDF 文档，使用 <embed> 标签显示 PDF 文档

官网：https://pdfobject.com/

• 使用步骤：

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	设置用于存储和提供文档注释的协作存储 这将覆盖审阅的默认评论服务器或默认首选项

• 预览效果：