七牛云存储+Google文件查看器实现在线预览文档功能

先看一下效果图：

由于一直都是走的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>

前端代码

七牛云存储+Google文件查看器 实现在线预览文档功能

七牛云存储+Google文件查看器实现在线预览文档功能