今天项目急需在线预览pdf功能，在网上搜了一堆，整合思路如下：

一、采用PDFObeject.js插件，优点:支持pdf输入打开口令，缺点:不支持手机浏览器

其实就光看这个网站也足够了，http://www.pdfobject.com/。

主要代码：

<script type="text/JavaScript" src="scripts/pdfobject/pdfobject.js"></script>
 <script type="text/javascript"> 
 window.onload = function (){
     var success = new PDFObject({ url: "/Path/dianzihuikan.pdf" ,pdfOpenParams: { scrollbars: '0', toolbar: '0', statusbar: '0'}}).embed("pdf1");
 };
 </script> 
  
 <div id="pdf1" style="width:700px; height:600px;">It appears you don't have Adobe Reader or PDF support in this web browser. <a href="~/pdf/CGVET22-08-2011V2P.pdf">Click here to download the PDF</a></div>

 

二、采用touchPDF.js插件，实现手机端预览pdf文件，缺点：pdf不能设置打开口令，否则js报错passwordException，上网未找到解决办法

主要代码：

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<head>
<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" />

</head>

<body>

<div id="myPDF"></div>

</body>

<script type="text/javascript">
  $(function() {
    $("#myPDF").pdf( { source: "/Path/dianzihuikan.pdf" } );
  });
</script>

这里遇到的问题是ios设备无法显示，解决办法是

修改 pdf.compatibility.js 

// + 新增代码，- 去除代码 ，否则是原内容不变，大概在471行
 var isChromeWithRangeBug = /Chrome\/(39|40)\./.test(navigator.userAgent);
  +  
  +  var isIPhone = /iPhone/.test(navigator.userAgent);
  +  var isIPad = /iPad/.test(navigator.userAgent);
  +  var isWeChat = /micromessenger/.test(navigator.userAgent);  -  if (isSafari || isOldAndroid || isChromeWithRangeBug) {
  +  if (isSafari || isOldAndroid || isChromeWithRangeBug || isIPhone || isIPad || isWeChat) {
       PDFJS.disableRange = true;
       PDFJS.disableStream = true;
     }

修改后即可在ios设备中正常访问。