先看一下效果图：
由于一直都是走的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>