插件描述:

这是一个 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

设置用于存储和提供文档注释的协作存储

这将覆盖审阅的默认评论服务器或默认首选项

预览效果:

pdf jquery 预览 js pdf预览插件_pdfobject.js