前端利用pdfobjectjs处理pdf文件

jiezi

6 年前

插件 pdfobject.js 官方链接：https://pdfobject.com/

a、创建盒子，可以对个盒子 example1 通过 style 添加样式

<style>
.pdfobject-container {
    height: 30rem;
    border: 1rem solid rgba(0,0,0,.1);
}
</style>
<div id="example1"></div>

b、引入插件

<script src="js/pdfobject.min.js"></script>
<script>
    PDFObject.embed(
        "/pdf/sample-3pp.pdf",
        "#example1"
     );
</script>

PDFObject.embed(url [string], target [mixed], options [object])

a、url [string] 即为 pdf 的链接；
b、target [mixed] 指定 dom 节点；
c、options [object] 初始化配置选项

page(初始化的时候跳转到第几页)
id(给嵌入元素一个 id 值)
width(嵌入元素的宽度)
height(嵌入元素的高度)
fallbackLink(回调链接，在浏览器不支持的情况下，给与一段提示文字和文件下载链接)
pdfOpenParams(允许使用 adobe 开放参数)

开放接口 view:

  基本参数：Fit
            FitH
            FitH, top
            FitV
            FitV, left
            FitB
            FitBH
            FitBH, top
            FitBV
            FitBV, left
  至此不在一一介绍：请查看文档 https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf

PDFJS_URL(pdf.js 的展示页面链接)
forcePDFJS(是否允许整合 pdf.js，true 为允许)

参考链接：
1、https://pdfobject.com/
2、pdf 官方开放接口：https://www.adobe.com/content…
3、https://blog.csdn.net/badgirl…

前端利用pdfobjectjs处理pdf文件

插件说明

插件引入

初始化配置