get from：PDF預覽之PDFObject.js總結

1. PDFObject.js - 將PDF嵌入到一個div內，而不是占據整個頁面(要求瀏覽器支持顯示PDF，不支持，可配置PDF.js來實現)
3. 官網:
4. https://pdfobject.com/
6. github地址：
7. https://github.com/pipwerks/PDFObject
9. 支持：
10. PDFObject 2.0不向後兼容1.0版本，針對現代瀏覽器設計，支持Chrome, Firefox, Safari (OS X and iOS), IE 9-11, and MS Edge
12. 使用：
13. 1.創建嵌入PDF的容器
14. <div id="pdf"></div>
16. 2.告訴PDFObject，插入的PDF文件路徑，以及插入到哪個容器
17. <script src="library/pdfobject.js"></script>
18. <script>
19. PDFObject.embed(‘uploads/pdfs/dongxuemin.pdf‘, ‘#pdf‘);
20. </script>
22. 3.可以選擇使用CSS來指定視覺樣式，包括維度、邊框、邊距等
23. <style>
24. .pdfobject-container {
25. height: 500px;
26. }
27. .pdfobject {
28. border: 1px solid #ccc;
29. }
30. </style>
32. 問題：
33. 在HTML頁面中，要嵌入PDF，是否需要Javascript代碼？
35. 答案：
36. 可以完全不用Javascript代碼！
38. 作者給出了頁面上嵌入PDF，而不使用任何Javascript代碼的4種方法：
39. https://pdfobject.com/static.html
41. /*
42. 註意：這些示例適用於所有現代桌面瀏覽器，但結果會因舊桌面瀏覽器和移動瀏覽器而異。至於iOS 9，這些示例在iOS的Safari中都不能正常工作。
43. */
45. 1.使用 <object> 標簽，當瀏覽器不支持PDF嵌入時，允許我們有替代的展示內容
46. <object data="uploads/pdfs/dongxuemin.pdf#page=2" type="application/pdf" width="100%" height="100%">
47. <p>抱歉，您的瀏覽器不支持PDF預覽，請點擊鏈接下載PDF文件<a href="uploads/pdfs/dongxuemin.pdf"></a></p>
48. </object>
49. /*
50. PDF文件如果不能被嵌入，說明該瀏覽器不支持PDF預覽，給出路徑，點擊鏈接就會下載(服務器，應該不需要怎麽配置，這都是默認配置)
51. */
53. 2.使用 <embed> 標簽，該方法被廣泛支持，但並非無處不在。不幸的是，<embed>並不像<object>一樣，當瀏覽器不支持時，提供替代的顯示方案，用戶看不到任何信息。
54. <embed src="uploads/pdfs/dongxuemin.pdf#page=2" type="application/pdf" width="100%" height="100%">
56. 3.使用 <iframe> 標簽，也是被廣泛使用
57. <iframe src="uploads/pdfs/dongxuemin.pdf#page=2" width="100%" height="100%">
58. <p>抱歉，您的瀏覽器不支持PDF預覽，請點擊鏈接下載PDF文件<a href="uploads/pdfs/dongxuemin.pdf"></a></p>
59. </iframe>
61. 4.使用 <object><iframe></iframe></object> 嵌套方式，能兼容更多用戶
62. <object data="uploads/pdfs/dongxuemin.pdf#page=2" type="application/pdf" width="100%" height="100%">
63. <iframe src="uploads/pdfs/dongxuemin.pdf#page=2" width="100%" height="100%">
64. <p>抱歉，您的瀏覽器不支持PDF預覽，請點擊鏈接下載PDF文件<a href="uploads/pdfs/dongxuemin.pdf"></a></p>
65. </iframe>
66. </object>
69. 既然不適用Javascript就可以嵌入PDF，為什麽還要使用 PDFObject?
70. PDFObject2.0會檢測瀏覽器是否支持行內/嵌入PDF。
72. 如果正在使用動態HTML，例如：單頁面應用，可能需要隨意插入PDF。如果某些瀏覽器不支持PDF嵌入，而你又沒有檢測瀏覽器是否只會PDF顯示，則會丟失PDF相關內容，以及破壞頁面的UI布局。
74. 而使用PDFObject，可以在需要嵌入PDF時，檢測瀏覽器是否支持，如果支持，則嵌入PDF，不支持，我們不嵌入PDF相關標簽，從而使用其他內容來替代。避免上面提到的問題。
76. PDFObject2.0支持npm。現代web應用使用npm來管理包和依賴。PDFObject2.0已註冊到npm，可以動態加載
78. PDFObject還可以輕松地指定Adobe的專有 ‘PDF打開參數‘。(註意，這些參數僅由Adobe Reader支持，大多數PDF閱讀器將忽略參數，包括Chrome，Internet Explorer和Safari中的內置PDF閱讀器，請閱讀下文。)
80. PDFObject不做什麽?(摘自其他文章翻譯，實在不想一字一字再翻譯了，自己英語也很有限...)
81. PDFObject不是一個渲染引擎。 PDFObject只是將一個<embed>元素寫入頁面，並依賴於瀏覽器或瀏覽器插件來呈現PDF。如果瀏覽器不支持嵌入式PDF，PDFObject不能強制瀏覽器呈現PDF。
83. 如果您需要強制瀏覽器顯示PDF，我們建議使用Mozilla的PDF.js.請註意，PDF.js有其自身的限制，如跨域安全限制。 PDFObject和PDF.js很好地協同工作，下面的例子中有一些很棒的PDF.js示例鏈接。
85. PDFObject不提供自定義PDF工具欄的外觀的功能。工具欄由瀏覽器控制，並且從瀏覽器到瀏覽器（Chrome與Safari和Firefox等）的差異很大。其中一些瀏覽器提供了通過PDF打開Parmeters顯示或隱藏工具欄或功能（如搜索字段）的功能。但是，一般來說，瀏覽器不提供自定義工具欄的任何機制。如果您真的需要自定義工具欄，請嘗試針對Mozilla的PDF.js進行自定義以滿足您的需求。
87. PDFObject不驗證PDF的存在，或PDF實際呈現。假設您指定一個有效的URL，並且網絡正常運行。 PDFObject不檢查404錯誤，JavaScript無法檢測PDF是否實際呈現，除非您使用的PDF.js不屬於PDFObject範圍。
89. PDFObject不會神奇地實現PDF打開參數。如上所述，這些參數不被廣泛支持。 PDF渲染引擎支持它們或不支持 - PDFObject不能強制渲染引擎實現這些功能。
91. API
92. PDFObject提供2個屬性和1個方法：
93. 屬性：
94. PDFObject.supportsPDFs
95. 檢測瀏覽器是否支持內嵌PDF，返回true | false。基於 navigator.mimeTypes[‘application/pdf‘] | ActiveX的AcroPDF.PDF | PDF.PdfCtrl 檢測。
97. PDFObject並不會檢測是具體哪個第三方(Adobe Reader, FoxIt, PDF.js等)
99. PDFObject.pdfobjectversion
100. 返回PDFObject的版本
102. 方法：
103. PDFObject.embed(url, target, options)
104. 嵌入成功，返回內嵌的元素對象(大多數情況返回<embed>標簽，當集成PDF.js，返回<iframe>標簽)
105. 嵌入失敗，則返回false
107. 作為PDFObject的核心，該方法提供了大量的功能和靈活性配置。
109. url - pdf地址
111. target - 可以是CSS選擇器、DOM對象、jQuery對象
113. options - 配置對象
114. page - 默認null。指定PDF打卡第幾頁。(前提是：瀏覽器支持)
116. id - 默認null。指定嵌入的<embed>或<iframe>元素對象的ID
117. PDFObject.embed(‘dongxuemin.pdf‘, ‘#pdf‘, {id: ‘my-pdf‘});
118. 會嵌入一個<embed>元素
119. <embed src="dongxuemin.pdf" id="my-pdf">
121. width - 默認 ‘100%‘。會在<embed>元素上，設置一個 style="width: 100%"
122. height - 默認 ‘100%‘。會在<embed>元素上，設置一個 style="height: 100%"
123. /*
124. 建議通過 CSS 來設置<embed>元素的尺寸，不設置width和height，此種方式，要求指定
125. .pdfobject-container {
126. width: 100px;
127. height: 100px;
128. }
129. 因為：PDFObject會自動追加
130. <embed> - pdfobject類
131. target(PDF嵌入的容器) - pdfobject-container類
132. 所以，我們可以使用默認的 ‘width: 100%;height: 100%;‘，使得<embed>和target一樣大小，給 target 設置大小，等同於給 <embed> 設置大小
133. */
135. fallbackLink - 默認 "<p>This browser does not support inline PDFs. Please download the PDF to view it: <a href=‘[url]‘>Download PDF</a></p>"。
136. 當瀏覽器不支持嵌入式PDF時，顯示的內容
137. 1.支持HTML標簽
138. 2.可以在內容中使用 ‘[url]‘，自動替代成我們填寫的 ‘pdf的url‘
139. 3.設置為false，如果不支持PDF時，什麽都不會展示
141. pdfOpenParams - 允許指定 Adobe的PDF打開參數(不做介紹了，看文檔)
143. /*
144. 這2個比較重要，和PDF.js相關
145. */
146. PDFJS_URL - 默認null。指定引入的PDF.js的PDF查看器的viewer訪問路徑
148. forcePDFJS - 默認false。是否強制使用PDF.js來渲染，而不管瀏覽器的默認PDF閱讀器
150. 實例：
151. PDFObject.embed(‘dongxuemin.pdf‘); // 未指定元素對象，則會占據整個瀏覽器窗口
152. PDFObject.embed(‘dongxuemin.pdf‘, ‘#pdf‘); // 嵌入到指定"id=pdf"的元素對象
153. var options = {
154. height: ‘300px‘,
155. pdfOpenParams: {view: ‘FitV‘, page: ‘2‘},
156. };
157. PDFObject.embed(‘dongxuemin.pdf‘, ‘#pdf‘, options); // 指定配置對象
159. 參考文章：
160. https://www.cnblogs.com/iPing9/p/7153713.html

PDF預覽之PDFObject.js總結