h5页面预览pdf文件_H5移动端在线浏览pdf文件，推荐插件TouchPDF

pdf.png

公共的pdf页面可以自己写，调用插件的代码也相对简单：

seePDF.html

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);