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

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

1. 引入依赖

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.media.js"></script>  

2. html代码
   html的代码比较简单，只需要插入a标签可以了，其中href为cdn的地址，但url可分为静态写死，和动态生成的

// 静态写死cdn地址
<a class="media" href="https://apptest.sf-financial.com/wealth/cdn/h5-merchant-wallet-protocol/OpenAccountStatement.pdf"></a>

// 动态生成，这里使用的是angular
<a class="media" ng-href="{{protocalUrl}}"></a>

3. 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)