瀏覽器中線上預覽pdf檔案（不使用外掛）
阿新 • • 發佈：2018-12-25
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <script src="jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { var purl='Scala(中文完整版).pdf';//要展示的檔案路徑 // 下面程式碼都是處理IE瀏覽器的情況 if (window.ActiveXObject || "ActiveXObject" in window) { //判斷是否為IE瀏覽器，"ActiveXObject" in window判斷是否為IE11 //判斷是否安裝了adobe Reader for (x = 2; x < 10; x++) { try { oAcro = eval("new ActiveXObject('PDF.PdfCtrl." + x + "');"); if (oAcro) { flag = true; } } catch (e) { flag = false; } } try { oAcro4 = new ActiveXObject('PDF.PdfCtrl.1'); if (oAcro4) { flag = true; } } catch (e) { flag = false; } try { oAcro7 = new ActiveXObject('AcroPDF.PDF.1'); if (oAcro7) { flag = true; } } catch (e) { flag = false; } if (flag) {//支援 pdfShow(purl);//呼叫顯示的方法 }else {//不支援 $("#pdfContent").append("對不起,您還沒有安裝PDF閱讀器軟體呢,為了方便預覽PDF文件,請選擇安裝！"); alert("對不起,您還沒有安裝PDF閱讀器軟體呢,為了方便預覽PDF文件,請選擇安裝！"); location = "http://ardownload.adobe.com/pub/adobe/reader/win/9.x/9.3/chs/AdbeRdr930_zh_CN.exe"; } }else { pdfShow(purl);//呼叫顯示的方法 } }); //顯示檔案方法，就是將檔案展示到div中 function pdfShow(url){ $("#pdfContent").append('<iframe style="height:100%;width:100%;" src="'+url+'"></iframe>'); } </script> </head> <body> <!--展示的div--> <div id="pdfContent" style="height:500px;width:500px;margin-left:300px;" > </div> </body> </html>
這樣就搞定了，接下來看看效果吧
下面是IE不支援的版本提示截圖
關閉彈窗後，開始彈出下載，
下載成功後重啟瀏覽器就可以瀏覽pdf檔案了
下面我用了幾個瀏覽器開啟後的效果圖貼出來
IE效果圖如下：
火狐效果圖如下：
谷歌效果圖如下：
360效果圖如下：
