java pdf 在线预览

1. jquery.media.js 使用简单 , 浏览页面简单, 接入项目简单,

​ 接入方式

​ 需要 : jquery.min.js 支持

​ 引入 jquery.media.js

<script type="text/javascript">  
    $(function() {  
        $('a.media').media({width:800, height:600});  
        $('a.mediase').media({width:800, height:600});  
    });  
</script> 

<div class="panel-body">
	  <a class="media" href="yulan.pdf"></a>  
   </div>

缺点: 不能操作 预览器: 例如 : pdf 的禁止下载, 打印什么的

2 .还是选择开源的 js pdf.js

下载官网地址：http://mozilla.github.io/pdf.js/
引入 build 和 web 文件夹

首先 方式一使用控制器跳转 viewer.html

​ 出现了问题, pdf 不出来, 然后就改js 路径啥的

​ 但是 还不出来 , 只出现了 pdf的页数, 使用演示模式的时候又可以看到pdf, 一脸懵逼,不知道还有哪里需要修改

方式二:

还是控制器跳转, 但是跳转的不是 viewer.html页面了, 另外写了个页面

, 使用 iframe 的方式 把viewer.html 引入进来, 解决

<iframe src="${ctxPath}/static/pdfjs/web/viewer.html?file=${ctxPath}/blockFile/pdf.do" width="100%" height="900px"></iframe>

注意: 这里的宽度可以100% 高度不行, 设置高度100% 会显示一丢丢

如果要设置 高度也自适应的话 可以把代码修改为:

<iframe id="mainiframe" src="${ctxPath}/static/pdfjs/web/viewer.html?file=${ctxPath}/blockFile/openImage/728"
        onload="changeFrameHeight()" width="100%" height="900px"></iframe>
        
<script>
    function changeFrameHeight(){
        var ifm= document.getElementById("mainiframe");
        ifm.height=document.documentElement.clientHeight-56; //56是头顶的高度
    }
    $(function(){ window.onresize=function(){
        changeFrameHeight(); }});
</script>       

使用 流引入

// 不注释的话, 从上次打开的页面加载 在 viewer.js 中
// localStorage.setItem(‘pdfjs.history’, databaseStr);