预览 zhangjingkun

src/main/java/com/zzsn/knowbase/controller/KbFileController.java

@@ -59,6 +59,19 @@ public class KbFileController {
     }
 
     /**
+     * 预览文档接口
+     * @param fileName
+     * @param filePath
+     * @param userName
+     * @param model
+     * @return
+     */
+    @GetMapping("/viewer")
+    public String viewerDocFile(String fileName, String filePath, String userName, Model model) {
+        return localFileService.viewerDocFile(fileName,filePath,userName,model);
+    }
+
+    /**
      * 编辑文档时的回调接口
      * @param request
      * @param response

src/main/java/com/zzsn/knowbase/service/ILocalFileService.java

@@ -56,6 +56,16 @@ public interface ILocalFileService {
     String editDocFile(String fileName, String filePath, String userName, Model model);
 
     /**
+     * 预览文档
+     * @param fileName
+     * @param filePath
+     * @param userName
+     * @param model
+     * @return
+     */
+    String viewerDocFile(String fileName, String filePath, String userName, Model model);
+
+    /**
      * 编辑文档时的回调接口
      * @param request
      * @param response

src/main/java/com/zzsn/knowbase/service/impl/LocalFileServiceImpl.java

@@ -164,12 +164,23 @@ public class LocalFileServiceImpl implements ILocalFileService {
         model.addAttribute("document", document);
         // 如果该格式不支持编辑，则返回预览页面
         if (!documentService.canEdit(document)) {
-            return "/demo";
+            return "/view";
         }
         model.addAttribute("documentEditParam", documentService.buildDocumentEditParam(userName, userName,filePath));
         return "/editor";
     }
 
+    @Override
+    public String viewerDocFile(String fileName, String filePath, String userName, Model model) {
+        Document document = documentService.getDocument(documentService.buildDocument(filePath, fileName));
+        model.addAttribute("document", document);
+//        // 如果该格式不支持编辑，则返回预览页面
+//        if (!documentService.canEdit(document)) {
+//            return "/view";
+//        }
+        model.addAttribute("documentEditParam", documentService.buildDocumentEditParam(userName, userName,filePath));
+        return "/view";
+    }
     //编辑文档时回调接口
     @Override
     public void callBack(HttpServletRequest request, HttpServletResponse response) throws IOException{

src/main/resources/static/js/viewer.js

-var Viewer = function() {
-    var docEditor;
-
-    var innerAlert = function (message) {
-        if (console && console.log)
-            console.log(message);
-    };
-
-    var onAppReady = function () {
-        innerAlert("文档查看已就绪~");
-    };
-
-    var onDocumentStateChange = function (event) {
-        var title = document.title.replace(/\*$/g, "");
-        document.title = title + (event.data ? "*" : "");
-    };
-
-    var onError = function (event) {
-        if (event) {
-            innerAlert(event.data);
-        }
-    };
-
-    var onOutdatedVersion = function (event) {
-        location.reload(true);
-    };
-
-    var getUrlParam = function (name) {
-        //构造一个含有目标参数的正则表达式对象
-        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
-        //匹配目标参数
-        var r = window.location.search.substr(1).match(reg);
-        //返回参数值
-        if (r != null) {
-            return decodeURI(r[2]);
-        }
-        return null;
-    };
-
-    var getDocumentConfig = function (document) {
-        if (document) {
-            return {
-                "document": document
-            };
-        }
-        innerAlert("文档未指定！");
-        return null;
-    };
-
-    var сonnectEditor = function (document) {
-        var config = getDocumentConfig(document);
-        config.width = "100%";
-        config.height = "100%";
-        config.events = {
-            "onAppReady": onAppReady,
-            "onDocumentStateChange": onDocumentStateChange,
-            "onError": onError,
-            "onOutdatedVersion": onOutdatedVersion
-        };
-        config.editorConfig = {
-            "lang": "zh-CN",
-            "mode": "view",
-            "recent": [],
-            // 自定义一些配置
-            "customization": {
-                "chat": false, // 禁用聊天菜单按钮
-                "commentAuthorOnly": true, // 仅能编辑和删除其注释
-                "comments": false, // 隐藏文档注释菜单按钮
-                "compactHeader": false, // 隐藏附加操作按钮
-                "compactToolbar": false, // 完整工具栏(true代表紧凑工具栏)
-                "feedback": {
-                    "visible": false // 隐藏反馈按钮
-                },
-                "forcesave": false, // true 表示强制文件保存请求添加到回调处理程序
-                "goback": false,/*{
-                            "blank": true, // 转到文档时，在新窗口打开网站(false表示当前窗口打开)
-                            "text": "转到文档位置（可以考虑放文档打开源页面）",
-                            // 文档打开失败时的跳转也是该地址
-                            "url": "http://www.lezhixing.com.cn"
-                        },*/
-                "help": false, // 隐藏帮助按钮
-                "hideRightMenu": false, // 首次加载时隐藏右侧菜单(true 为显示)
-                "showReviewChanges": false, // 加载编辑器时自动显示/隐藏审阅更改面板(true显示 false隐藏)
-                "toolbarNoTabs": false, // 清楚地显示顶部工具栏选项卡(true 代表仅突出显示以查看选择了哪一个)
-                "zoom": 100 // 定义文档显示缩放百分比值
-            }
-
-        };
-        docEditor = new DocsAPI.DocEditor("iframeEditor", config);
-    };
-
-    return {
-        init : function(document) {
-            сonnectEditor(document);
-        }
-    }
-}();
\ No newline at end of file

src/main/resources/templates/kk.html

-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Title</title>
-</head>
-<body>
- This is a page
-</body>
-</html>

src/main/resources/templates/view.html

+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
+<head>
+    <title th:text="${document.title}"></title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" th:href="@{/css/viewer.css}">
+</head>
+<body>
+    <div class="form">
+        <div id="iframeEditor"></div>
+    </div>
+    <script type="text/javascript" th:src="@{/js/jquery-1.8.2.js}"></script>
+    <script type="text/javascript" th:src="@{${documentServerApiJs}}"></script>
+    <script type="text/javascript" th:src="@{/js/demo.js}"></script>
+    <!-- 先通过 th:inline=“javascript” 添加到标签，这样js代码即可访问model中的属性 -->
+    <script th:inline="javascript">
+        // js 中可以通过“[[${xxx}]]” 格式获得实际的值
+        Editor.init([[${document}]], [[${documentEditParam}]]);
+    </script>
+</body>
+</html>