jquery.media.js在线预览pdf使用总结


最近有个移动端项目的协议比较多，需要展示给客户预览，而为了节约时间，想直接将 pdf 协议展示，不想再转换成html，于是经过网上搜索资料和技术调研，再经过 < object >、 < embed >、 < iframe >、 pdf.js、 jquery.media.js的技术尝试之后，发现在pc端表现不错，但一旦用手机打开，有的会变成了下载，兼容性无法达到要求。

虽然最后没用上这些技术，但自己也积累了一波知识，其中研究的比较多的是jquery.media.js，在此记录一下使用吧。

  1. 引入依赖
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.media.js"></script>
  1. html代码
    html的代码比较简单，只需要插入a标签可以了，其中href为cdn的地址，但url可分为静态写死，和动态生成的
// 静态写死cdn地址
<a class="media" href="https://apptest.sf-financial/wealth/cdn/h5-merchant-wallet-protocol/OpenAccountStatement.pdf"></a>

// 动态生成，这里使用的是angular
<a class="media" ng-href="{{protocalUrl}}"></a>
  1. js代码
    js代码就比较多坑了。。
    首先，必须使用$(‘a.media’).media({width: 宽度, height: 高度})，否则不会显示。
    其次，宽度和高度不能带单位，不能是百分比，所以最好先获取当前屏幕的宽和高，再传进去。
    最后，由于pdf的url是动态生成的，需要拿到url后才去初始化，所以用了settimeout方法，将初始化放在最后。
$timeout(function(){
	$(function() {  
        var w = document.documentElement.clientWidth;
        var h = document.documentElement.clientHeight;
        $('a.media').media({width: w, height: h});
    });
}, 0)

更多推荐

jquery.media.js在线预览pdf使用总结