笔记在前端需要查看pdf文件的方法总结。笔者以前在打开pdf文件时,有时候设计通过浏览器来打开的,也就是说浏览器本身是支持pdf文件格式,按照这个逻辑整理了一点资料来总结一下6种方法在前端编程查看服务器端的pdf文件,仅供参考。

    Talk is cheap,show me the code!

1、a链接查看。这种方法就需要人为点击链接才会显示pdf文件内容,是显示还是下载就决定于浏览器的解释方法了。

<html>

<body>

<a href="unix test.pdf">Download PDF</a>

<p>链接查看pdf</p>

</body>

</html>

2、标签embed查看pdf。

<html>

<body>

<embed src="unix test.pdf" type="application/pdf" width=800 height=800>

<p>embed标签查看pdf</p>

</body>

</html>

3、标签object查看pdf。

<html>

<body>

<object data="unix test.pdf" type="application/pdf" width=800 height=800>

This browser does not support PDFs. Please download the PDF to view it: <a href="unix test.pdf">Download PDF</a>

</object>

<p>object标签查看pdf</p>

</body>

</html>

4、iframe标签查看pdf。

<html>

<body>

<iframe src="unix test.pdf" width=900 height=900>

This browser does not support PDFs. Please download the PDF to view it: <a href="unix test.pdf">Download PDF</a>

</iframe>

<p>标签iframe查看pdf</p>

</body>

</html>

5、插件jquery.media.js

    jQuery Media Plugin是一款基于jQuery的网页媒体播放器插件,它支持大部分的网络多媒体播放器和多媒体格式 。“插件可以根据当前的脚本配置,自动将a标签替换成div,并生成object, embed甚至是iframe代码,至于生成object还是embed,jQuery Media会根据当前平台自动判别,因此兼容性方面非常出色。”所以这个插件的实现功能就是上面标签功能是一样的,那么在浏览器上面的显示也会是一样。

    在使用时需要引入js文件, <script type="text/javascript"src="jquery.media.js"></script>

    html端通过href来定位到需要打开的pdf文件。

<div>
    <a class="media" href="pdf1.pdf"></a>  
 </div>

6、pdf.js框架

    前面三种方法是基于标签,可能每个浏览器解释的效果不一样,那么pdf.js框架利用js语言,就可以兼容统一的显示pdf文件。如果文档不想下载的话,可以在view.html中将下载按钮隐藏或删除,而标签的下载按钮就无法取消。

    官网或者github上下载pdf.js资源包,里面提供了一些使用demo。笔者是apache服务器,浏览器直接定位到viewer.html,http://localhost/pdfjs/web/viewer.html就可以查看实例pdf文件。viewer.html是渲染pdf阅读器的样式,viewer.js则是指定打开的pdf文件,可以在文件中搜索目标文件就可以找到了,修改viewer.js文件中的pdf路径参数可以选择其他文档。在实际应用中,可以在viewer.html后添加参数通过页面参数传值的方式加载pdf文件,比如http://localhost/pdfjs/web/viewer.html?file=unixtest.pdf  ,那就可以打开unixtest.pdf文件了 。

      可以对比一下标签和pdf.js,后者在html界面上显示的功能更加丰富,功能也更加强大,具体使用方法就不在累赘说明了,请自行搜索。