IE上線上瀏覽PDF
阿新 • • 發佈：2019-02-12
工作中遇到在IE中，線上顯示PDF的需求，專案採用的是SpringMvc。
這裡有二種情況，一是在jsp中顯示pdf，還有一種就是html中顯示PDF。運用所遇到的問題是在html中顯示PDF，針對IE而言可以用jsp直接顯示出來，或者使用Adobe Reader軟體來實現線上預覽的功能。
現在就來講如何用jsp實現PDF線上預覽的功能：
控制層程式碼如下：
public String forwardFileViewSh(HttpServletRequest request, HttpServletResponse response, ModelMap model) throws IOException { String pdfPath = "E://PDF.pdf"; pdfPath.replaceAll("////", "\\"); System.out.println(pdfPath); FileInputStream fis = new FileInputStream(pdfPath); int i = fis.available(); byte data[] = new byte[i]; fis.read(data); OutputStream toClient = response.getOutputStream(); toClient.write(data); toClient.flush(); toClient.close(); fis.close(); return "/PDFView.jsp"; }
顯示層PDFView.jsp程式碼如下：
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>PDFView</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <% out.alear(); out = pageContext.pushBody(); %> </head> <body> </body> </html>
對於IE線上瀏覽PDF，如果不是用jsp顯示PDF，使用HTML來顯示這個要安裝Adobe Reader軟體，即使採用js外掛的方式，似乎要安轉了Adobe Reader軟體pdf才能顯示出來。對於功能的實現，採用pdfobject.js外掛可以實現。 具體程式碼如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta content="IE=7" http-equiv="X-UA-Compatible" /> <title>附件上傳</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=9" /> <link rel="stylesheet" type="text/css" href="/thirdparty/pdfview/css/sc_style.css" /> <script type="text/JavaScript" src="/thirdparty/pdfobject.js"></script> <style type="text/css" media="screen"> body {height:100%;} body {margin:0; padding:0; overflow:auto;} #flashContent {display:none;} </style> <script type="text/javascript"> window.onload = function (){ var success = new PDFObject({url: "E://PDFTest.pdf" ,pdfOpenParams: { scrollbars: '0', toolbar: '0', statusbar: '0'}}).embed("sc_right"); }; </script> </head> <body> <div style="font-size:20px;text-align:center;">附件資訊</div> <div class="sc_box" id="mian"> <hr/> <div class="sc_left border1 w899" style="float:left"> <div class="top_tabs clearfix"> <ul> <li><span class="a1_active" id="a1">附件</span></li> </ul> </div> <div class="sc_listbox" id="html_a1"> <div class="sc_list"> <div id="sclist"> <table id="FileList" width="280" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff"> <tr> <td> <img src='/thirdparty/pdfview/Images/pdf.jpg'/><span style="font-family: Arial, Helvetica, sans-serif;">E://PDFTest.pdf"</span> </td> </tr> </table> <div id="fileData"> </div> </div> </div> </div> <div class="sc_czbox"> <a href="<span style="font-family: Arial, Helvetica, sans-serif;">E://PDFTest.pdf</span><span style="font-family: Arial, Helvetica, sans-serif;">" style="text-decoration:none;">下載附件</a></span> </div> </div> <div id="sc_right" align="right" style="width:700px;\height:630px;float:left">似乎您沒有Adobe Reader或PDF支援web瀏覽器,請下載該附件，用本地軟體開啟！</div> </div> </body> </html>