移动端在线浏览pdf，试过几个插件，最终选择了方便的TouchPDF
git路径 https://github.com/May1st/pdf-online-h5-in-IOS-ANDROID.git
以下是真实项目页面：
pdf.png
公共的pdf页面可以自己写，调用插件的代码也相对简单：
seePDF.html
<!-- 头部导入，注意jquery版本 -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="pdf.compatibility.js"></script>
<script type="text/javascript" src="pdf.js"></script>
<script type="text/javascript" src="jquery.touchSwipe.js"></script>
<script type="text/javascript" src="jquery.panzoom.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.touchPDF.js"></script>
<link href="jquery.touchPDF.css" rel="stylesheet" media="screen" />
<!-- body中放个div -->
<div id="myPDF" style="height: 95%; width: 95%; margin: auto;"></div>
seePDF.js
$(function() {
//文件服务器的路径
var picDownloadServerUrl = window && window.weapon ? window.weapon.picDownloadServer : ''，
//url中传递的pdf文件路径
pdfURL = Utils.getParamFromUrl('pdfURL')，
//pdf浏览路径
s = picDownloadServerUrl + pdfURL;
//开始使用TouchPDF插件
$("#myPDF").pdf( {
title: '',
source: s,
loadingWitdh: loadingWitdh,
loadingHeight: loadingHeight
} );
alert('可左右滑动翻页');
})
项目中自己做了个简单的公共插件modal，是一个可以展示图片或者pdf的弹窗，pdf则使用iframe动态将自己的seePDF页面路径插入src。此处要注意src的路径以防出现跨域问题，可以使用一下代码对iframe中的pdf路径进行预测试：
Utils.js
var Utils = {
//展示文件类的页面
showFilePage: function(fileName) {
if (fileName.indexOf('.pdf') > -1) {
var s = window.location.host + '/test/pdf/pdfURL=' + fileName;
if (!s.indexOf('http') > -1) {
s = 'http://' + s;
}
Utils.tetPage(s).then(function(){
window.location.href = s;
},
function(){
Utils.errorPage('文件不存在，请联系后台管理员！');
});
}
}
//预测试文件类页面
tetPage: function(url) {
return $.ajax({
type: "GET",
cache: false,
url: url,
data: "",
success: function() {
console.log('1')
},
error: function() {
console.log('2')
}
});
}
}
某个业务模块的pdf展示页面:
newDetails.js
Utils.showFilePage(pdfName);
