PDF预览之PDFObject.js总结

get from：PDF预览之PDFObject.js总结

 

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