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

先看一下效果图：由于一直都是走的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 [email protected] 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  12  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> .