浏览器实现PDF预览
1、使用jquery.media.js预览PDF
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>01使用jquery.media插件进行PDF预览</title>
- <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
- <script type="text/javascript" src="js/jquery.media.js"></script>
- </head>
- <script>
- $(document).ready(function() {
- $('div.media').media({
- width: 1200,
- height: 600,
- src: "生活规律.pdf"
- });
- });
- </script>
- <body>
- <div class="media"></div>
- </body>
- </html>
2、使用PDF.JS在线查看PDF
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>02使用pdf.js插件进行PDF预览</title>
- </head>
- <body>
- <a href="#" onclick="window.open('js/html5-online-pdf-viewer/web/viewer.html?file=/浏览器实现PDF预览/生活规律.pdf');">
- 查看生活规律.pdf
- </a>
- </body>
- </html>
3、利用PDF.JS插件解决了本地pdf文件在线浏览问题(根据需要隐藏下载功能,只保留打印功能)
隐藏下载功能:
在viewer.html更改即可
更改之前
更改之后
即增加 style="visibility:hidden" 就可隐藏下载功能。
隐藏打印等其他功能同上。
附件源码