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