码迷，mamicode.com
首页 > Web开发 > 详细

PDF预览之PDFObject.js总结

时间：2018-05-10 14:31:03      阅读：932      评论：0      收藏：0      [点我收藏+]

标签：post   英语   做什么   插入   ref   library   无法   att   not   

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文件<a 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文件<a 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文件<a 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: <a 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  

PDF预览之PDFObject.js总结

标签：post   英语   做什么   插入   ref   library   无法   att   not   

原文地址：https://www.cnblogs.com/pejsidney/p/9019143.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！