浏览器实现PDF预览

1、使用jquery.media.js预览PDF


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>01使用jquery.media插件进行PDF预览</title>
  6. <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
  7. <script type="text/javascript" src="js/jquery.media.js"></script>
  8. </head>
  9. <script>
  10. $(document).ready(function() {
  11. $('div.media').media({
  12. width: 1200,
  13. height: 600,
  14. src: "生活规律.pdf"
  15. });
  16. });
  17. </script>
  18. <body>
  19. <div class="media"></div>
  20. </body>
  21. </html>

2、使用PDF.JS在线查看PDF


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>02使用pdf.js插件进行PDF预览</title>
  6. </head>
  7. <body>
  8.  <a href="#" onclick="window.open('js/html5-online-pdf-viewer/web/viewer.html?file=/浏览器实现PDF预览/生活规律.pdf');">
  9.   查看生活规律.pdf
  10.  </a>
  11. </body>
  12. </html>

3、利用PDF.JS插件解决了本地pdf文件在线浏览问题(根据需要隐藏下载功能,只保留打印功能)

隐藏下载功能:

在viewer.html更改即可

更改之前

 

更改之后

 

即增加   style="visibility:hidden"    就可隐藏下载功能。

隐藏打印等其他功能同上。

附件源码

下载地址:https://gitee.com/KingXin666/PDFPreviewOnBrowsers

 

posted @ 2017-08-07 21:51  四叶草Grass  阅读(1555)  评论(0编辑  收藏  举报