zoukankan      html  css  js  c++  java
  • PDF预览之PDFObject.js总结

    PDFObject.js - 将PDF嵌入到一个div内,而不是占据整个页面(要求浏览器支持显示PDF,不支持,可配置PDF.js来实现)

    官网:
    https://pdfobject.com/

    github地址:
    https://github.com/pipwerks/PDFObject

    支持:
    PDFObject 2.0不向后兼容1.0版本,针对现代浏览器设计,支持Chrome, Firefox, Safari (OS X and iOS), IE 9-11, and MS Edge

    使用:
    1.创建嵌入PDF的容器
    <div id="pdf"></div>

    2.告诉PDFObject,插入的PDF文件路径,以及插入到哪个容器
    <script src="library/pdfobject.js"></script>
    <script>
    PDFObject.embed('uploads/pdfs/dongxuemin.pdf', '#pdf');
    </script>

    3.可以选择使用CSS来指定视觉样式,包括维度、边框、边距等
    <style>
    .pdfobject-container {
    height: 500px;
    }
    .pdfobject {
    border: 1px solid #ccc;
    }
    </style>

    问题:
    在HTML页面中,要嵌入PDF,是否需要Javascript代码?

    答案:
    可以完全不用Javascript代码!

    作者给出了页面上嵌入PDF,而不使用任何Javascript代码的4种方法:
    https://pdfobject.com/static.html

    /*
    注意:这些示例适用于所有现代桌面浏览器,但结果会因旧桌面浏览器和移动浏览器而异。至于iOS 9,这些示例在iOS的Safari中都不能正常工作。
    */

    1.使用 <object> 标签,当浏览器不支持PDF嵌入时,允许我们有替代的展示内容
    <object data="uploads/pdfs/dongxuemin.pdf#page=2" type="application/pdf" width="100%" height="100%">
    <p>抱歉,您的浏览器不支持PDF预览,请点击链接下载PDF文件<a href="uploads/pdfs/dongxuemin.pdf"></a></p>
    </object>
    /*
    PDF文件如果不能被嵌入,说明该浏览器不支持PDF预览,给出路径,点击链接就会下载(服务器,应该不需要怎么配置,这都是默认配置)
    */

    2.使用 <embed> 标签,该方法被广泛支持,但并非无处不在。不幸的是,<embed>并不像<object>一样,当浏览器不支持时,提供替代的显示方案,用户看不到任何信息。
    <embed src="uploads/pdfs/dongxuemin.pdf#page=2" type="application/pdf" width="100%" height="100%">

    3.使用 <iframe> 标签,也是被广泛使用
    <iframe src="uploads/pdfs/dongxuemin.pdf#page=2" width="100%" height="100%">
    <p>抱歉,您的浏览器不支持PDF预览,请点击链接下载PDF文件<a href="uploads/pdfs/dongxuemin.pdf"></a></p>
    </iframe>

    4.使用 <object><iframe></iframe></object> 嵌套方式,能兼容更多用户
    <object data="uploads/pdfs/dongxuemin.pdf#page=2" type="application/pdf" width="100%" height="100%">
    <iframe src="uploads/pdfs/dongxuemin.pdf#page=2" width="100%" height="100%">
    <p>抱歉,您的浏览器不支持PDF预览,请点击链接下载PDF文件<a href="uploads/pdfs/dongxuemin.pdf"></a></p>
    </iframe>
    </object>


    既然不适用Javascript就可以嵌入PDF,为什么还要使用 PDFObject?
    PDFObject2.0会检测浏览器是否支持行内/嵌入PDF。

    如果正在使用动态HTML,例如:单页面应用,可能需要随意插入PDF。如果某些浏览器不支持PDF嵌入,而你又没有检测浏览器是否只会PDF显示,则会丢失PDF相关内容,以及破坏页面的UI布局。

    而使用PDFObject,可以在需要嵌入PDF时,检测浏览器是否支持,如果支持,则嵌入PDF,不支持,我们不嵌入PDF相关标签,从而使用其他内容来替代。避免上面提到的问题。

    PDFObject2.0支持npm。现代web应用使用npm来管理包和依赖。PDFObject2.0已注册到npm,可以动态加载

    PDFObject还可以轻松地指定Adobe的专有 'PDF打开参数'。(注意,这些参数仅由Adobe Reader支持,大多数PDF阅读器将忽略参数,包括Chrome,Internet Explorer和Safari中的内置PDF阅读器,请阅读下文。)

    PDFObject不做什么?(摘自其他文章翻译,实在不想一字一字再翻译了,自己英语也很有限...)
    PDFObject不是一个渲染引擎。 PDFObject只是将一个<embed>元素写入页面,并依赖于浏览器或浏览器插件来呈现PDF。如果浏览器不支持嵌入式PDF,PDFObject不能强制浏览器呈现PDF。

    如果您需要强制浏览器显示PDF,我们建议使用Mozilla的PDF.js.请注意,PDF.js有其自身的限制,如跨域安全限制。 PDFObject和PDF.js很好地协同工作,下面的例子中有一些很棒的PDF.js示例链接。

    PDFObject不提供自定义PDF工具栏的外观的功能。工具栏由浏览器控制,并且从浏览器到浏览器(Chrome与Safari和Firefox等)的差异很大。其中一些浏览器提供了通过PDF打开Parmeters显示或隐藏工具栏或功能(如搜索字段)的功能。但是,一般来说,浏览器不提供自定义工具栏的任何机制。如果您真的需要自定义工具栏,请尝试针对Mozilla的PDF.js进行自定义以满足您的需求。

    PDFObject不验证PDF的存在,或PDF实际呈现。假设您指定一个有效的URL,并且网络正常运行。 PDFObject不检查404错误,JavaScript无法检测PDF是否实际呈现,除非您使用的PDF.js不属于PDFObject范围。

    PDFObject不会神奇地实现PDF打开参数。如上所述,这些参数不被广泛支持。 PDF渲染引擎支持它们或不支持 - PDFObject不能强制渲染引擎实现这些功能。

    API
    PDFObject提供2个属性和1个方法:
    属性:
    PDFObject.supportsPDFs
    检测浏览器是否支持内嵌PDF,返回true | false。基于 navigator.mimeTypes['application/pdf'] | ActiveX的AcroPDF.PDF | PDF.PdfCtrl 检测。

    PDFObject并不会检测是具体哪个第三方(Adobe Reader, FoxIt, PDF.js等)

    PDFObject.pdfobjectversion
    返回PDFObject的版本

    方法:
    PDFObject.embed(url, target, options)
    嵌入成功,返回内嵌的元素对象(大多数情况返回<embed>标签,当集成PDF.js,返回<iframe>标签)
    嵌入失败,则返回false

    作为PDFObject的核心,该方法提供了大量的功能和灵活性配置。

    url - pdf地址

    target - 可以是CSS选择器、DOM对象、jQuery对象

    options - 配置对象
    page - 默认null。指定PDF打卡第几页。(前提是:浏览器支持)

    id - 默认null。指定嵌入的<embed>或<iframe>元素对象的ID
    PDFObject.embed('dongxuemin.pdf', '#pdf', {id: 'my-pdf'});
    会嵌入一个<embed>元素
    <embed src="dongxuemin.pdf" id="my-pdf">

    width - 默认 '100%'。会在<embed>元素上,设置一个 style=" 100%"
    height - 默认 '100%'。会在<embed>元素上,设置一个 style="height: 100%"
    /*
    建议通过 CSS 来设置<embed>元素的尺寸,不设置width和height,此种方式,要求指定
    .pdfobject-container {
    100px;
    height: 100px;
    }
    因为:PDFObject会自动追加
    <embed> - pdfobject类
    target(PDF嵌入的容器) - pdfobject-container类
    所以,我们可以使用默认的 ' 100%;height: 100%;',使得<embed>和target一样大小,给 target 设置大小,等同于给 <embed> 设置大小
    */

    fallbackLink - 默认 "<p>This browser does not support inline PDFs. Please download the PDF to view it: <a href='[url]'>Download PDF</a></p>"。
    当浏览器不支持嵌入式PDF时,显示的内容
    1.支持HTML标签
    2.可以在内容中使用 '[url]',自动替代成我们填写的 'pdf的url'
    3.设置为false,如果不支持PDF时,什么都不会展示

    pdfOpenParams - 允许指定 Adobe的PDF打开参数(不做介绍了,看文档)

    /*
    这2个比较重要,和PDF.js相关
    */
    PDFJS_URL - 默认null。指定引入的PDF.js的PDF查看器的viewer访问路径

    forcePDFJS - 默认false。是否强制使用PDF.js来渲染,而不管浏览器的默认PDF阅读器

    实例:
    PDFObject.embed('dongxuemin.pdf'); // 未指定元素对象,则会占据整个浏览器窗口
    PDFObject.embed('dongxuemin.pdf', '#pdf'); // 嵌入到指定"id=pdf"的元素对象
    var options = {
    height: '300px',
    pdfOpenParams: {view: 'FitV', page: '2'},
    };
    PDFObject.embed('dongxuemin.pdf', '#pdf', options); // 指定配置对象

    参考文章:
    https://www.cnblogs.com/iPing9/p/7153713.html

  • 相关阅读:
    使用C#实现DHT磁力搜索的BT种子后端管理程序+数据库设计(开源)
    便携版WinSCP在命令行下同步文件夹
    ffmpeg (ffprobe)分析文件关键帧时间点
    sqlite删除数据或者表后,回收数据库文件大小
    ubuntu 20.04下 freeswitch 配合 fail2ban 防恶意访问
    ffmpeg使用nvenc编码的结论记录
    PC版跑跑卡丁车 故事模式 亚瑟传说章节 卡美洛庆典 2阶段 心灵之眼 攻略
    There was an error loading or playing the video
    Nvidia RTX Voice 启动报错修复方法
    火狐浏览器 关闭跨域限制
  • 原文地址:https://www.cnblogs.com/itjeff/p/12881534.html
Copyright © 2011-2022 走看看