在html页面中展示pdf文件，实现在线阅读

来源：互联网发布：大数据的商品化编辑：程序博客网时间：2024/04/28 07:46

参考文章：1.http://blog.csdn.net/broze/article/details/6743314

2.http://www.pdfobject.com/

要求：需要在html页面中嵌入pdf文件，实现在线阅读。

场景：pdf文件，本人的pdf文件是代码里的20141212apple.pdf和boy.pdf文件，保存在当前的web应用中:

webroot/test/20141212apple.pdf

webroot/test/20141212boy.pdf

所以并没有测试跨域访问是否可以。根据参考博客，好像有问题。。

实现方式：1.需要下载第三方的js插件，pdfobject.js

2.客户端浏览器需要pdf插件支持。

浏览器：chrome，firefox，ie8均可支持

___代码

</pre><pre>

<script type="text/javascript" src="$!{frontImageServer}/js/jquery.js"></script><script type="text/javascript" src="$!{frontImageServer}/scripts/pdfobject.js"></script><script type='text/javascript'> window.onload=function(){new PDFObject({      url: 'test/20141212apple.pdf',      pdfOpenParams: {           view: 'Fit',           scrollbars: '0',           toolbar: '0',           statusbar: '0',           navpanes: '0' }      }).embed('pdf1');   };    // 点击触发 targetDivId:展示pdf的divid。pdfurl：pdf资源路径  function readMe(targetDivId,pdfurl){   new PDFObject({      url: pdfurl,      pdfOpenParams: {           view: 'Fit',           scrollbars: '0',           toolbar: '0',           statusbar: '0',           navpanes: '0' }       }).embed(targetDivId);   }</script><!--pdf test--><div style="font-size:18px;">----直接加载pdf----</div><div id="pdf1" style="height:375px;">It appears you don't have Adobe Reader or PDF support in this web browser. <a href="/test/20141212apple.pdf">Click here to download the PDF</a></div></div><hr/><div style="font-size:18px;">----第一次点击显示pdf----</div><div id="pdf2" style="width:100%; height:375px;"><a href="javascript:void(0);" onclick="readMe('pdf2','test/20141212apple.pdf');"><font style="font-size:18px;color:red">kobe.点击在线打开pdf文件</font></a></div><div style="font-size:18px;">----第二次点击显示pdf----</div><div id="pdf3" style="width:100%; height:375px;"><a href="javascript:void(0);" onclick="readMe('pdf3','test/20141212boy.pdf');"><font style="font-size:18px;color:blue">owen.点击在线打开pdf文件</font></a></div>

1 0