H5移动端在线浏览pdf文件，推荐插件TouchPDF

移动端在线浏览pdf，试过几个插件，最终选择了方便的TouchPDF
git路径 https://github.com/May1st/pdf-online-h5-in-IOS-ANDROID.git
以下是真实项目页面：

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