jquery.media.js在线预览pdf使用总结
最近有个移动端项目的协议比较多,需要展示给客户预览,而为了节约时间,想直接将 pdf 协议展示,不想再转换成html,于是经过网上搜索资料和技术调研,再经过 < object >、 < embed >、 < iframe >、 pdf.js、 jquery.media.js的技术尝试之后,发现在pc端表现不错,但一旦用手机打开,有的会变成了下载,兼容性无法达到要求。
虽然最后没用上这些技术,但自己也积累了一波知识,其中研究的比较多的是jquery.media.js,在此记录一下使用吧。
- 引入依赖
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.media.js"></script>
- 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>
- 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使用总结
发布评论