html中前端页⾯预览pdf⽂档的6种⽅法
x86汇编语言程序设计笔记在前端需要查看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>jquery下载文件请求>计算机后端开发
<body>
<embed src="unix test.pdf" type="application/pdf" width=800 height=800>
selectedindexes<p>embed标签查看pdf</p>
</body>radiogroup设置选中
</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。location guard
<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、插件dia.js
jQuery Media Plugin是⼀款基于jQuery的⽹页媒体播放器插件,它⽀持⼤部分的⽹络多媒体播放器和多媒体格式 。“插件可以根据当前的脚本配置,⾃动将a标签替换成div,并⽣成object, embed甚⾄是iframe代码,⾄于⽣成object还是embed,jQuery Media会根据当前平台⾃动判别,因此兼容性⽅⾯⾮常出⾊。”所以这个插件的实现功能就是上⾯标签功能是⼀样的,那么在浏览器上⾯的显⽰也会是⼀样。
在使⽤时需要引⼊js⽂件, <script type="text/javascript"src="dia.js"></script>
html端通过href来定位到需要打开的pdf⽂件。
<div>
<a class="media" href="pdf1.pdf"></a>
</div>
6、pdf.js框架
前⾯三种⽅法是基于标签,可能每个浏览器解释的效果不⼀样,那么pdf.js框架利⽤js语⾔,就可以兼容统⼀的显⽰pdf⽂件。如果⽂档不想下载的话,可以在view.html中将下载按钮隐藏或删除,⽽标签的下载按钮就⽆法取消。
可以对⽐⼀下标签和pdf.js,后者在html界⾯上显⽰的功能更加丰富,功能也更加强⼤,具体使⽤⽅法就不在累赘说明了,请⾃⾏搜索。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论