1. PDFObject.js - 将PDF嵌入到一个div内,而不是占据整个页面(要求浏览器支持显示PDF,不支持,可配置PDF.js来实现)
  2. 官网:
  3. https://pdfobject.com/
  4. github地址:
  5. https://github.com/pipwerks/PDFObject
  6. 支持:
  7. PDFObject 2.0不向后兼容1.0版本,针对现代浏览器设计,支持Chrome, Firefox, Safari (OS X and iOS), IE 9-11, and MS Edge
  8. 使用:
  9. 1.创建嵌入PDF的容器
  10. <div id="pdf"></div>
  11. 2.告诉PDFObject,插入的PDF文件路径,以及插入到哪个容器
  12. <script src="library/pdfobject.js"></script>
  13. <script>
  14. PDFObject.embed('uploads/pdfs/dongxuemin.pdf', '#pdf');
  15. </script>
  16. 3.可以选择使用CSS来指定视觉样式,包括维度、边框、边距等
  17. <style>
  18. .pdfobject-container {
  19. height: 500px;
  20. }
  21. .pdfobject {
  22. border: 1px solid #ccc;
  23. }
  24. </style>
  25. 问题:
  26. 在HTML页面中,要嵌入PDF,是否需要Javascript代码?
  27. 答案:
  28. 可以完全不用Javascript代码!
  29. 作者给出了页面上嵌入PDF,而不使用任何Javascript代码的4种方法:
  30. https://pdfobject.com/static.html
  31. /*
  32. 注意:这些示例适用于所有现代桌面浏览器,但结果会因旧桌面浏览器和移动浏览器而异。至于iOS 9,这些示例在iOS的Safari中都不能正常工作。
  33. */
  34. 1.使用 <object> 标签,当浏览器不支持PDF嵌入时,允许我们有替代的展示内容
  35. <object data="uploads/pdfs/dongxuemin.pdf#page=2" type="application/pdf" width="100%" height="100%">
  36. <p>抱歉,您的浏览器不支持PDF预览,请点击链接下载PDF文件<a href="uploads/pdfs/dongxuemin.pdf"></a></p>
  37. </object>
  38. /*
  39. PDF文件如果不能被嵌入,说明该浏览器不支持PDF预览,给出路径,点击链接就会下载(服务器,应该不需要怎么配置,这都是默认配置)
  40. */
  41. 2.使用 <embed> 标签,该方法被广泛支持,但并非无处不在。不幸的是,<embed>并不像<object>一样,当浏览器不支持时,提供替代的显示方案,用户看不到任何信息。
  42. <embed src="uploads/pdfs/dongxuemin.pdf#page=2" type="application/pdf" width="100%" height="100%">
  43. 3.使用 <iframe> 标签,也是被广泛使用
  44. <iframe src="uploads/pdfs/dongxuemin.pdf#page=2" width="100%" height="100%">
  45. <p>抱歉,您的浏览器不支持PDF预览,请点击链接下载PDF文件<a href="uploads/pdfs/dongxuemin.pdf"></a></p>
  46. </iframe>
  47. 4.使用 <object><iframe></iframe></object> 嵌套方式,能兼容更多用户
  48. <object data="uploads/pdfs/dongxuemin.pdf#page=2" type="application/pdf" width="100%" height="100%">
  49. <iframe src="uploads/pdfs/dongxuemin.pdf#page=2" width="100%" height="100%">
  50. <p>抱歉,您的浏览器不支持PDF预览,请点击链接下载PDF文件<a href="uploads/pdfs/dongxuemin.pdf"></a></p>
  51. </iframe>
  52. </object>
  53. 既然不适用Javascript就可以嵌入PDF,为什么还要使用 PDFObject?
  54. PDFObject2.0会检测浏览器是否支持行内/嵌入PDF。
  55. 如果正在使用动态HTML,例如:单页面应用,可能需要随意插入PDF。如果某些浏览器不支持PDF嵌入,而你又没有检测浏览器是否只会PDF显示,则会丢失PDF相关内容,以及破坏页面的UI布局。
  56. 而使用PDFObject,可以在需要嵌入PDF时,检测浏览器是否支持,如果支持,则嵌入PDF,不支持,我们不嵌入PDF相关标签,从而使用其他内容来替代。避免上面提到的问题。
  57. PDFObject2.0支持npm。现代web应用使用npm来管理包和依赖。PDFObject2.0已注册到npm,可以动态加载
  58. PDFObject还可以轻松地指定Adobe的专有 'PDF打开参数'。(注意,这些参数仅由Adobe Reader支持,大多数PDF阅读器将忽略参数,包括Chrome,Internet Explorer和Safari中的内置PDF阅读器,请阅读下文。)
  59. PDFObject不做什么?(摘自其他文章翻译,实在不想一字一字再翻译了,自己英语也很有限...)
  60. PDFObject不是一个渲染引擎。 PDFObject只是将一个<embed>元素写入页面,并依赖于浏览器或浏览器插件来呈现PDF。如果浏览器不支持嵌入式PDF,PDFObject不能强制浏览器呈现PDF。
  61. 如果您需要强制浏览器显示PDF,我们建议使用Mozilla的PDF.js.请注意,PDF.js有其自身的限制,如跨域安全限制。 PDFObject和PDF.js很好地协同工作,下面的例子中有一些很棒的PDF.js示例链接。
  62. PDFObject不提供自定义PDF工具栏的外观的功能。工具栏由浏览器控制,并且从浏览器到浏览器(Chrome与Safari和Firefox等)的差异很大。其中一些浏览器提供了通过PDF打开Parmeters显示或隐藏工具栏或功能(如搜索字段)的功能。但是,一般来说,浏览器不提供自定义工具栏的任何机制。如果您真的需要自定义工具栏,请尝试针对Mozilla的PDF.js进行自定义以满足您的需求。
  63. PDFObject不验证PDF的存在,或PDF实际呈现。假设您指定一个有效的URL,并且网络正常运行。 PDFObject不检查404错误,JavaScript无法检测PDF是否实际呈现,除非您使用的PDF.js不属于PDFObject范围。
  64. PDFObject不会神奇地实现PDF打开参数。如上所述,这些参数不被广泛支持。 PDF渲染引擎支持它们或不支持 - PDFObject不能强制渲染引擎实现这些功能。
  65. API
  66. PDFObject提供2个属性和1个方法:
  67. 属性:
  68. PDFObject.supportsPDFs
  69. 检测浏览器是否支持内嵌PDF,返回true | false。基于 navigator.mimeTypes['application/pdf'] | ActiveX的AcroPDF.PDF | PDF.PdfCtrl 检测。
  70. PDFObject并不会检测是具体哪个第三方(Adobe Reader, FoxIt, PDF.js等)
  71. PDFObject.pdfobjectversion
  72. 返回PDFObject的版本
  73. 方法:
  74. PDFObject.embed(url, target, options)
  75. 嵌入成功,返回内嵌的元素对象(大多数情况返回<embed>标签,当集成PDF.js,返回<iframe>标签)
  76. 嵌入失败,则返回false
  77. 作为PDFObject的核心,该方法提供了大量的功能和灵活性配置。
  78. url - pdf地址
  79. target - 可以是CSS选择器、DOM对象、jQuery对象
  80. options - 配置对象
  81. page - 默认null。指定PDF打卡第几页。(前提是:浏览器支持)
  82. id - 默认null。指定嵌入的<embed>或<iframe>元素对象的ID
  83. PDFObject.embed('dongxuemin.pdf', '#pdf', {id: 'my-pdf'});
  84. 会嵌入一个<embed>元素
  85. <embed src="dongxuemin.pdf" id="my-pdf">
  86. width - 默认 '100%'。会在<embed>元素上,设置一个 style="width: 100%"
  87. height - 默认 '100%'。会在<embed>元素上,设置一个 style="height: 100%"
  88. /*
  89. 建议通过 CSS 来设置<embed>元素的尺寸,不设置width和height,此种方式,要求指定
  90. .pdfobject-container {
  91. width: 100px;
  92. height: 100px;
  93. }
  94. 因为:PDFObject会自动追加
  95. <embed> - pdfobject类
  96. target(PDF嵌入的容器) - pdfobject-container类
  97. 所以,我们可以使用默认的 'width: 100%;height: 100%;',使得<embed>和target一样大小,给 target 设置大小,等同于给 <embed> 设置大小
  98. */
  99. fallbackLink - 默认 "<p>This browser does not support inline PDFs. Please download the PDF to view it: <a href='[url]'>Download PDF</a></p>"。
  100. 当浏览器不支持嵌入式PDF时,显示的内容
  101. 1.支持HTML标签
  102. 2.可以在内容中使用 '[url]',自动替代成我们填写的 'pdf的url'
  103. 3.设置为false,如果不支持PDF时,什么都不会展示
  104. pdfOpenParams - 允许指定 Adobe的PDF打开参数(不做介绍了,看文档)
  105. /*
  106. 这2个比较重要,和PDF.js相关
  107. */
  108. PDFJS_URL - 默认null。指定引入的PDF.js的PDF查看器的viewer访问路径
  109. forcePDFJS - 默认false。是否强制使用PDF.js来渲染,而不管浏览器的默认PDF阅读器
  110. 实例:
  111. PDFObject.embed('dongxuemin.pdf');      // 未指定元素对象,则会占据整个浏览器窗口
  112. PDFObject.embed('dongxuemin.pdf', '#pdf');  // 嵌入到指定"id=pdf"的元素对象
  113. var options = {
  114. height: '300px',
  115. pdfOpenParams: {view: 'FitV', page: '2'},
  116. };
  117. PDFObject.embed('dongxuemin.pdf', '#pdf', options);     // 指定配置对象
  118. 参考文章:
  119. https://www.cnblogs.com/iPing9/p/7153713.html

PDF预览之PDFObject.js总结的更多相关文章

  1. [转]PDF预览插件PDFObject.js

    本文转自:http://pdfobject.com/index.php When possible, use standardized HTML markup and avoid JavaScript ...

  2. 浏览器实现PDF预览

    1.使用jquery.media.js预览PDF <!DOCTYPE html> <html> <head> <meta charset="utf- ...

  3. Pdf预览功能实现(asp.net)

    asp.net中使用 1.pdf预览功能实现的插件是pdfjs-1.5.188-dist //引入插件中相关的文件以及jquery文件 @section css{ <link rel=" ...

  4. Android原生PDF功能实现:PDF阅读、PDF页面跳转、PDF手势伸缩、PDF目录树、PDF预览缩略图

    1.背景 近期,公司希望实现安卓原生端的PDF功能,要求:高效.实用. 经过两天的调研.编码,实现了一个简单Demo,如上图所示. 关于安卓原生端的PDF功能实现,技术点还是很多的,为了咱们安卓开发的 ...

  5. Atitit.pdf 预览 转换html attilax总结

    Atitit.pdf 预览 转换html attilax总结 1. Swf flash还是html1 2. pdf2htmlEX1 3. iText 5.5.0 发布,Java 的 PDF 操作类库1 ...

  6. ABAP FORM打印转PDF/pdf 预览

    function ZSTXBC_SSFCOMP_PDF_PREVIEW. *"-------------------------------------------------------- ...

  7. Winforn中使用FastReport实现点击导出按钮PDF预览并弹出另存为对话框

    场景 FastReport安装包下载.安装.去除使用限制以及工具箱中添加控件: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...

  8. pdf预览-js版本

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  9. pdf 在线预览之 pdfobject插件

    支持到ie9 可以不用安装  如果安装 npm i pdfobject 第一步:引入pdfObject包 申明一个变量 const { PDFObject } = require("../. ...

随机推荐

  1. python 匹配指定后缀的文件名

    import glob x=glob.glob('*.py') print(x)

  2. Windows__书

    1.<<Windows 网络与通信程序设计>> (第2版) 2. 3.

  3. Collections中的各种方法

    一.各种方法介绍 Counter 统计个数   elements  most_common  subtract defaultdict 字典默认值 ChainMap  合并多个映射对象(字典) Ord ...

  4. SPOJ COMPANYS Two Famous Companies 最小生成树,二分,思路 难度:2

    http://www.spoj.com/problems/COMPANYS/en/ 题目要求恰好有k条0类边的最小生成树 每次给0类边的权值加或减某个值delta,直到最小生成树上恰好有k条边为0,此 ...

  5. django-pure-pagination使用方法

    1.pip install django-pure-pagination  安装包. 2.加入app: 'pure_pagination', 3.在view中写入分布逻辑. try: page = r ...

  6. 线程的同步之Synchronized在单例模式中的应用

    synchronized在单例模式中的使用 在单例模式中有一种懒汉式的单例,就是类初始化的时候不创建对象.等第一次获取的时候再创建对象.这种单例在单线程下是没有问题的获取的也都是同一个对象.但是如果放 ...

  7. Centos7 防火墙常用命令 开启 关闭防火墙

    如果你的系统上没有安装使用命令安装 #yum install firewalld  //安装firewalld 防火墙 开启服务 # systemctl start firewalld.service ...

  8. 《Agile Web Development With Rails》读后感--rails基于web设计的best Practices

    最近看完<Agile Web Development with Rails>一书,受益匪浅.书中先是用一个简单的web应用带你进入Rails的世界,然后在你大致熟悉之后,再带你了解Rail ...

  9. zTree简单使用

    zTree使用 zTree github地址 zTree API文档 zTree插件依赖JQ所以使用zTree首先引入JQ,另外zTree的点击功能,编辑功能都是单独的文件,如需使用也要引入(也可以引 ...

  10. 第11课 enum,sizeof,typedef分析

    枚举类型的使用方法: enum的地位和struct是相等的,enum主要用来根据需要定义一些离散的值. 枚举类型的特殊意义: 工程中常用无名枚举来定义常量. 程序示例: #include <st ...