先看一下效果圖：
由於一直都是走的java路線，所以在我接觸Google文件查看器之前，我是把文檔上傳到自己文件服務器，通過POI（http://poi.apache.org）去解析各類文檔的，但是通過POI實現在線查看文檔是一件很麻煩的事情，而且效果很不好。后來接觸到了Google文件查看器（https://docs.google.com/viewer），只要提供一個文檔的url就可以在線預覽 16 種以上不同類型的文件。現在是不用在后台解析文檔了，但是考慮到用戶請求響應時間的問題，就把文檔直接存到七牛雲存儲上，七牛雲存儲的好處這里就不介紹了，七牛的官網（http://www.qiniu.com）介紹的特別詳細。上傳文件請參考七牛官方文檔（http://docs.qiniu.com）。下面是通過spring mvc實現在線預覽word功能：
1 /**
2 * 七牛雲存儲控制器 3 * 4 * @author bingoogol@sina.com 5 */
6 @Controller 7 @RequestMapping("/qiniu") 8 public class QiniuController { 9
10 /**
11 * 響應客戶端的在線查看請求 12 * @param bucketName 空間的名字 13 * @param hash 文件的名稱 14 * @param model 15 * @return
16 */
17 @RequestMapping(value = "/view/{bucketName}/{hash}", method = RequestMethod.GET) 18 public String view(@PathVariable String bucketName, @PathVariable String hash, Model model) { 19 model.addAttribute("fileUrl", getFileUrl(bucketName, hash)); 20 return "front/qiniu/view"; 21 } 22
23 /**
24 * 獲取文件的url 25 * @param bucketName 空間的名字 26 * @param hash 文件的名稱 27 * @return
28 */
29 private String getFileUrl(String bucketName, String hash) { 30 //在此之前先參考七牛官方文檔配置公鑰和密鑰（我已經在初始化servlet里已經配置好了）
31 Mac mac = new Mac(Config.ACCESS_KEY, Config.SECRET_KEY); 32 try { 33 String baseUrl = URLUtils.makeBaseUrl(bucketName + ".u.qiniudn.com", hash); 34 GetPolicy getPolicy = new GetPolicy(); 35 String fileUrl = getPolicy.makeRequest(baseUrl, mac); 36 System.out.println("編碼前:" + fileUrl); 37 // Google 文檔查看器要求url是經過iso-8859-1編碼的
38 fileUrl = URLEncoder.encode(fileUrl, "iso-8859-1"); 39 System.out.println("編碼后:" + fileUrl); 40 return fileUrl; 41 } catch (Exception e) { 42 e.printStackTrace(); 43 } 44 return ""; 45 } 46 }
1 <%@ page pageEncoding="UTF-8"%>
2 <!DOCTYPE html>
3 <html>
4 <head>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <link href="${pageContext.request.contextPath }/resources/common/css/bootstrap.css" rel="stylesheet" />
8 <link href="${pageContext.request.contextPath }/resources/common/css/bootstrap-theme.css" rel="stylesheet" />
9 <link href="${pageContext.request.contextPath }/resources/common/css/common.css" rel="stylesheet" />
10 <title>七牛雲存儲練習</title>
11 <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
12 <!--[if lt IE 9]> 13 <script src="${pageContext.request.contextPath }/resources/common/js/html5shiv.js"></script> 14 <script src="${pageContext.request.contextPath }/resources/common/js/respond.min.js"></script> 15 <![endif]-->
16 <style type="text/css">
17 </style>
18 </head>
19 <body>
20 <div class="container">
21 <div class="panel panel-primary">
22 <div class="panel-heading">
23 <h3 class="panel-title text-center">七牛雲存儲+Google文件查看器 實現在線預覽文檔</h3>
24 </div>
25 <div class="panel-body">
26 <!-- 在線預覽文檔主要是這一行實現的 -->
27 <iframe src="http://docs.google.com/viewer?url=${fileUrl }&embedded=true" width="100%" height="780" style="border: none;"></iframe>
28 </div>
29 </div>
30 </div>
31 <script type="text/javascript" src="${pageContext.request.contextPath }/resources/common/js/jquery-2.0.3.js"></script>
32 <script type="text/javascript" src="${pageContext.request.contextPath }/resources/common/js/bootstrap.js"></script>
33 </body>
34 </html>