引入galimatias,解决不规范文件名导致文件下载异常

server/src/main/config/freemarker_implicit.ftl

@@ -1,7 +1,5 @@
 [#ftl]
 [#-- @implicitly included --]
-[#-- @ftlvariable name="file" type="cn.keking.model.FileAttribute" --]
-[#-- @ftlvariable name="fileName" type="java.lang.String" --]
 [#-- @ftlvariable name="fileTree" type="java.lang.String" --]
 [#-- @ftlvariable name="baseUrl" type="java.lang.String" --]
 [#-- @ftlvariable name="imgUrls" type="String" --]

server/src/main/java/cn/keking/service/FileHandlerService.java

@@ -275,7 +275,7 @@ public class FileHandlerService {
         attribute.setUrl(url);
         if (req != null) {
             String officePreviewType = req.getParameter("officePreviewType");
-            String fileKey = WebUtils.getUrlParameterReg(url,"fileKey");
+            String fileKey = req.getParameter("fileKey");
             if (StringUtils.hasText(officePreviewType)) {
                 attribute.setOfficePreviewType(officePreviewType);
             }

server/src/main/java/cn/keking/service/FilePreview.java

@@ -17,8 +17,6 @@ public interface FilePreview {
     String OFFICE_PICTURE_FILE_PREVIEW_PAGE = "officePicture";
     String TXT_FILE_PREVIEW_PAGE = "txt";
     String EXEL_FILE_PREVIEW_PAGE = "html";
-    String XML_FILE_PREVIEW_PAGE = "xml";
-    String MARKDOWN_FILE_PREVIEW_PAGE = "markdown";
     String NOT_SUPPORTED_FILE_PAGE = "fileNotSupported";
 
     String filePreviewHandle(String url, Model model, FileAttribute fileAttribute);

server/src/main/java/cn/keking/service/impl/MarkdownFilePreviewImpl.java

@@ -5,6 +5,8 @@ import cn.keking.service.FilePreview;
 import org.springframework.stereotype.Service;
 import org.springframework.ui.Model;
 
+import static cn.keking.service.impl.SimTextFilePreviewImpl.TEXT_TYPE;
+
 /**
  * @author kl (http://kailing.pub)
  * @since 2020/12/25
@@ -21,7 +23,7 @@ public class MarkdownFilePreviewImpl implements FilePreview {
 
     @Override
     public String filePreviewHandle(String url, Model model, FileAttribute fileAttribute) {
-         simTextFilePreview.filePreviewHandle(url, model, fileAttribute);
-         return MARKDOWN_FILE_PREVIEW_PAGE;
+        model.addAttribute(TEXT_TYPE,"markdown");
+        return simTextFilePreview.filePreviewHandle(url, model, fileAttribute);
     }
 }

server/src/main/java/cn/keking/service/impl/SimTextFilePreviewImpl.java

@@ -20,6 +20,9 @@ import java.nio.charset.StandardCharsets;
 @Service
 public class SimTextFilePreviewImpl implements FilePreview {
 
+    public static final String TEXT_TYPE = "textType";
+    public static final String DEFAULT_TEXT_TYPE = "simText";
+
     private final OtherFilePreviewImpl otherFilePreview;
 
     public SimTextFilePreviewImpl(OtherFilePreviewImpl otherFilePreview) {
@@ -40,6 +43,9 @@ public class SimTextFilePreviewImpl implements FilePreview {
         } catch (IOException e) {
             return otherFilePreview.notSupportedFile(model, fileAttribute, e.getLocalizedMessage());
         }
+        if (!model.containsAttribute(TEXT_TYPE)) {
+            model.addAttribute(TEXT_TYPE, DEFAULT_TEXT_TYPE);
+        }
         return TXT_FILE_PREVIEW_PAGE;
     }
 

server/src/main/java/cn/keking/service/impl/XmlFilePreviewImpl.java

@@ -5,6 +5,8 @@ import cn.keking.service.FilePreview;
 import org.springframework.stereotype.Service;
 import org.springframework.ui.Model;
 
+import static cn.keking.service.impl.SimTextFilePreviewImpl.TEXT_TYPE;
+
 /**
  * @author kl (http://kailing.pub)
  * @since 2020/12/25
@@ -20,7 +22,7 @@ public class XmlFilePreviewImpl implements FilePreview {
 
     @Override
     public String filePreviewHandle(String url, Model model, FileAttribute fileAttribute) {
-        simTextFilePreview.filePreviewHandle(url, model, fileAttribute);
-        return XML_FILE_PREVIEW_PAGE;
+        model.addAttribute(TEXT_TYPE,"xml");
+        return simTextFilePreview.filePreviewHandle(url, model, fileAttribute);
     }
 }

server/src/main/java/cn/keking/web/controller/OnlinePreviewController.java

@@ -57,7 +57,6 @@ public class OnlinePreviewController {
             return otherFilePreview.notSupportedFile(model, errorMsg);
         }
         FileAttribute fileAttribute = fileHandlerService.getFileAttribute(fileUrl, req);
-        model.addAttribute("file", fileAttribute);
         FilePreview filePreview = previewFactory.get(fileAttribute);
         logger.info("预览文件url：{}，previewType：{}", fileUrl, fileAttribute.getType());
         return filePreview.filePreviewHandle(fileUrl, model, fileAttribute);

server/src/main/resources/web/commonHeader.ftl

@@ -1,49 +0,0 @@
-
-
-<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
-<script src="js/jquery-3.0.0.min.js" type="text/javascript"></script>
-<script src="js/jquery.form.min.js" type="text/javascript"></script>
-<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
-<script src="js/watermark.js" type="text/javascript"></script>
-<script src="js/base64.min.js" type="text/javascript"></script>
-
-<script>
-    /**
-     * 初始化水印
-     */
-    function initWaterMark() {
-        let watermarkTxt = '${watermarkTxt}';
-        if (watermarkTxt !== '') {
-            watermark.init({
-                watermark_txt: '${watermarkTxt}',
-                watermark_x: 0,
-                watermark_y: 0,
-                watermark_rows: 0,
-                watermark_cols: 0,
-                watermark_x_space: ${watermarkXSpace},
-                watermark_y_space: ${watermarkYSpace},
-                watermark_font: '${watermarkFont}',
-                watermark_fontsize: '${watermarkFontsize}',
-                watermark_color: '${watermarkColor}',
-                watermark_alpha: ${watermarkAlpha},
-                watermark_width: ${watermarkWidth},
-                watermark_height: ${watermarkHeight},
-                watermark_angle: ${watermarkAngle},
-            });
-        }
-    }
-
-</script>
-<style>
-    * {
-        margin: 0;
-        padding: 0;
-    }
-
-    html, body {
-        height: 100%;
-        width: 100%;
-    }
-
-</style>
-

server/src/main/resources/web/compress.ftl

@@ -5,8 +5,15 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0">
     <link href="css/zTreeStyle.css" rel="stylesheet" type="text/css">
-    <#include "*/commonHeader.ftl">
     <style type="text/css">
+        * {
+            margin: 0;
+            padding: 0;
+        }
+        html, body {
+            height: 100%;
+            width: 100%;
+        }
         body {
             background-color: #404040;
         }
@@ -25,7 +32,10 @@
 <div class="zTreeDemoBackground left">
     <ul id="treeDemo" class="ztree"></ul>
 </div>
+<script src="js/watermark.js" type="text/javascript"></script>
+<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
 <script type="text/javascript" src="js/jquery.ztree.core.js"></script>
+<script type="text/javascript" src="js/base64.min.js" ></script>
 
 <script type="text/javascript">
     const data = JSON.parse('${fileTree}');
@@ -77,7 +87,25 @@
 
     /*初始化水印*/
     window.onload = function() {
-      initWaterMark();
+        var watermarkTxt = '${watermarkTxt}';
+        if (watermarkTxt !== '') {
+            watermark.init({
+                watermark_txt: '${watermarkTxt}',
+                watermark_x: 0,
+                watermark_y: 0,
+                watermark_rows: 0,
+                watermark_cols: 0,
+                watermark_x_space: ${watermarkXSpace},
+                watermark_y_space: ${watermarkYSpace},
+                watermark_font: '${watermarkFont}',
+                watermark_fontsize: '${watermarkFontsize}',
+                watermark_color:'${watermarkColor}',
+                watermark_alpha: ${watermarkAlpha},
+                watermark_width: ${watermarkWidth},
+                watermark_height: ${watermarkHeight},
+                watermark_angle: ${watermarkAngle},
+            });
+        }
     }
 
     /**

server/src/main/resources/web/fileNotSupported.ftl

@@ -32,7 +32,7 @@
 <div class="container">
     <img src="images/sorry.jpg" />
     <span>
-        该文件类型(${file.suffix})系统暂时不支持在线预览，<b>说明</b>：
+        该文件类型(${fileType})系统暂时不支持在线预览，<b>说明</b>：
         <p style="color: red;">${msg}</p>
         有任何疑问，请加&nbsp;<a href="https://jq.qq.com/?_wv=1027&k=5c0UAtu">官方QQ群：613025121</a>&nbsp;咨询
     </span>

server/src/main/resources/web/flv.ftl

@@ -4,9 +4,17 @@
     <meta charset="utf-8" />
     <title>多媒体文件预览</title>
     <script src="js/flv.min.js"type="text/javascript"></script>
-    <#include "*/commonHeader.ftl">
+    <script src="js/watermark.js" type="text/javascript"></script>
 </head>
 <style>
+    * {
+        margin: 0;
+        padding: 0;
+    }
+    html, body {
+        height: 100%;
+        width: 100%;
+    }
     body {
         background-color: #404040;
     }
@@ -32,7 +40,25 @@
     }
     /*初始化水印*/
     window.onload = function() {
-      initWaterMark();
+        var watermarkTxt = '${watermarkTxt}';
+        if (watermarkTxt !== '') {
+            watermark.init({
+                watermark_txt: '${watermarkTxt}',
+                watermark_x: 0,
+                watermark_y: 0,
+                watermark_rows: 0,
+                watermark_cols: 0,
+                watermark_x_space: ${watermarkXSpace},
+                watermark_y_space: ${watermarkYSpace},
+                watermark_font: '${watermarkFont}',
+                watermark_fontsize: '${watermarkFontsize}',
+                watermark_color:'${watermarkColor}',
+                watermark_alpha: ${watermarkAlpha},
+                watermark_width: ${watermarkWidth},
+                watermark_height: ${watermarkHeight},
+                watermark_angle: ${watermarkAngle},
+            });
+        }
     }
 </script>
 </body>

server/src/main/resources/web/html.ftl

@@ -4,11 +4,21 @@
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0">
-    <#include "*/commonHeader.ftl">
+    <style type="text/css">
+        * {
+            margin: 0;
+            padding: 0;
+        }
+        html, body {
+            height: 100%;
+            width: 100%;
+        }
+    </style>
 </head>
 <body>
     <iframe src="${pdfUrl}" width="100%" frameborder="0"></iframe>
 </body>
+<script src="js/watermark.js" type="text/javascript"></script>
 <script type="text/javascript">
     document.getElementsByTagName('iframe')[0].height = document.documentElement.clientHeight-10;
     /**
@@ -20,7 +30,25 @@
     }
     /*初始化水印*/
     window.onload = function() {
-      initWaterMark();
+        var watermarkTxt = '${watermarkTxt}';
+        if (watermarkTxt !== '') {
+            watermark.init({
+                watermark_txt: '${watermarkTxt}',
+                watermark_x: 0,
+                watermark_y: 0,
+                watermark_rows: 0,
+                watermark_cols: 0,
+                watermark_x_space: ${watermarkXSpace},
+                watermark_y_space: ${watermarkYSpace},
+                watermark_font: '${watermarkFont}',
+                watermark_fontsize: '${watermarkFontsize}',
+                watermark_color:'${watermarkColor}',
+                watermark_alpha: ${watermarkAlpha},
+                watermark_width: ${watermarkWidth},
+                watermark_height: ${watermarkHeight},
+                watermark_angle: ${watermarkAngle},
+            });
+        }
     }
 </script>
 </html>

server/src/main/resources/web/index.ftl

@@ -19,17 +19,18 @@
 </head>
 
 <body>
-<div class="panel-group container" id="accordion">
 <h1>文件预览项目接入和测试界面</h1>
-
+<div class="panel-group" id="accordion">
     <div class="panel panel-default">
         <div class="panel-heading">
             <h4 class="panel-title">
-                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
+                <a data-toggle="collapse" data-parent="#accordion"
+                   href="#collapseOne">
                     接入说明
                 </a>
             </h4>
         </div>
+        <div id="collapseOne" class="panel-collapse collapse">
             <div class="panel-body">
                 <div>
                     如果你的项目需要接入文件预览项目，达到对docx、excel、ppt、jpg等文件的预览效果，那么通过在你的项目中加入下面的代码就可以
@@ -48,6 +49,7 @@
                 </div>
             </div>
         </div>
+    </div>
     <div class="panel panel-default">
         <div class="panel-heading">
             <h4 class="panel-title">
@@ -57,11 +59,12 @@
                 </a>
             </h4>
         </div>
+        <div id="collapseTwo" class="panel-collapse collapse">
             <div class="panel-body">
                 <div style="padding: 10px">
                     <form enctype="multipart/form-data" id="fileUpload">
                         <input type="file" name="file" />
-                    <input type="button" id="btnSubmit" value=" 上 传 "/>
+                        <input type="button" id="btnsubmit" value=" 上 传 " />
                     </form>
                 </div>
                 <div>
@@ -69,18 +72,21 @@
                 </div>
             </div>
         </div>
+    </div>
     <div class="panel panel-default">
         <div class="panel-heading">
             <h4 class="panel-title">
-                <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
-                    发版记录
+                <a data-toggle="collapse" data-parent="#accordion"
+                   href="#collapseThree">
+                    更新记录
                 </a>
             </h4>
         </div>
+        <div id="collapseThree" class="panel-collapse collapse in">
             <div class="panel-body">
                 <div>
                      2020年12月27日 ：<br>
-                2020年年终大版本更新，架构全面设计，代码全面重构，代码质量全面提升，二次开发更便捷，欢迎拉源码品鉴，提issue、pr共同建设<br>
+                        2020年年终大版本更新，架构全面设计，代码全面重构，代码质量全面提升，二次开发更便捷，欢迎拉源码品鉴，提issue、pr共同建设
                         1. 架构模块调整,大量的代码重构，代码质量提升N个等级，欢迎品鉴<br>
                         2. 增强XML文件预览效果，新增XML文档数结构预览<br>
                         3. 新增markdown文件预览支持，预览支持md渲染和源文本切换支持<br>
@@ -148,7 +154,7 @@
                         2.项目github开源:<a href="https://github.com/kekingcn/kkFileView" target="_blank">https://github.com/kekingcn/kkFileView</a>
                 </div>
             </div>
-
+        </div>
         <div class="panel-body">
             <div id = "comments"></div>
         </div>
@@ -184,7 +190,7 @@
             url: '${baseUrl}deleteFile?fileName=' + encodeURIComponent(fileName),
             success: function (data) {
                 // 删除完成，刷新table
-                if (1 === data.code) {
+                if (1 == data.code) {
                     alert(data.msg);
                 } else{
                     $('#table').bootstrapTable('refresh', {});
@@ -195,7 +201,6 @@
             }
         })
     }
-
     $(function () {
         $('#table').bootstrapTable({
             url: 'listFiles',
@@ -223,12 +228,12 @@
             $(".loading_container").css("height", height).show();
         }
 
-        $("#btnSubmit").click(function () {
+        $("#btnsubmit").click(function () {
             showLoadingDiv();
             $("#fileUpload").ajaxSubmit({
                 success: function (data) {
                     // 上传完成，刷新table
-                    if (1 === data.code) {
+                    if (1 == data.code) {
                         alert(data.msg);
                     } else {
                         $('#table').bootstrapTable('refresh', {});

server/src/main/resources/web/markdown.ftl

@@ -1,73 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0">
-    <title>markdown文本预览</title>
-    <script src="js/marked.min.js" type="text/javascript"></script>
-    <#include "*/commonHeader.ftl">
-</head>
-<body>
-<input hidden id="textData" value="${textData}"/>
-
-<div class="container">
-    <div class="panel panel-default">
-        <div id="markdown_btn" class="panel-heading">
-            <h4 class="panel-title">
-                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
-                    ${file.name}
-                </a>
-            </h4>
-        </div>
-        <div id="text_btn" class="panel-heading">
-            <h4 class="panel-title">
-                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
-                    ${file.name}
-                </a>
-            </h4>
-        </div>
-        <div class="panel-body">
-            <div id="markdown"></div>
-        </div>
-    </div>
-</div>
-
-<script>
-    /**
-     * 初始化
-     */
-    window.onload = function () {
-        $("#markdown_btn").hide()
-        initWaterMark();
-        loadMarkdown();
-    }
-
-    /**
-     * 加载markdown
-     */
-    function loadMarkdown() {
-        var textData = Base64.decode($("#textData").val())
-        window.textPreData = "<pre style='background-color: #FFFFFF;border:none'>" + textData + "</pre>";
-        window.textMarkdownData = marked(textData);
-        $("#markdown").html(window.textMarkdownData);
-    }
-
-
-    $(function () {
-        $("#markdown_btn").click(function () {
-            $("#markdown").html(window.textMarkdownData);
-            $("#text_btn").show()
-            $("#markdown_btn").hide()
-        });
-
-        $("#text_btn").click(function () {
-            $("#markdown_btn").show()
-            $("#text_btn").hide();
-            $("#markdown").html(window.textPreData);
-        });
-    });
-
-</script>
-</body>
-
-</html>

server/src/main/resources/web/media.ftl

@@ -5,12 +5,19 @@
     <title>多媒体文件预览</title>
     <link rel="stylesheet" href="plyr/plyr.css" />
     <script type="text/javascript" src="plyr/plyr.js"></script>
-    <#include "*/commonHeader.ftl">
+    <script type="text/javascript" src="js/watermark.js"></script>
     <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+        html, body {
+            height: 100%;
+            width: 100%;
+        }
         body {
             background-color: #404040;
         }
-
         .m {
             width: 1024px;
             margin: 0 auto;
@@ -26,7 +33,25 @@
 <script>
     plyr.setup();
     window.onload = function() {
-        initWaterMark();
+        var watermarkTxt = '${watermarkTxt}';
+        if (watermarkTxt !== '') {
+            watermark.init({
+                watermark_txt: '${watermarkTxt}',
+                watermark_x: 0,
+                watermark_y: 0,
+                watermark_rows: 0,
+                watermark_cols: 0,
+                watermark_x_space: ${watermarkXSpace},
+                watermark_y_space: ${watermarkYSpace},
+                watermark_font: '${watermarkFont}',
+                watermark_fontsize: '${watermarkFontsize}',
+                watermark_color:'${watermarkColor}',
+                watermark_alpha: ${watermarkAlpha},
+                watermark_width: ${watermarkWidth},
+                watermark_height: ${watermarkHeight},
+                watermark_angle: ${watermarkAngle},
+            });
+        }
     }
 </script>
 </body>

server/src/main/resources/web/officePicture.ftl

@@ -4,8 +4,15 @@
     <meta charset="utf-8" />
     <title>PDF图片预览</title>
     <script src="js/lazyload.js"></script>
-    <#include "*/commonHeader.ftl">
     <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+        html, body {
+            height: 100%;
+            width: 100%;
+        }
         body {
             background-color: #404040;
         }
@@ -30,10 +37,29 @@
 <#if "false" == switchDisabled>
     <img src="images/pdf.svg" width="63" height="63" style="position: fixed; cursor: pointer; top: 40%; right: 48px; z-index: 999;" alt="使用PDF预览" title="使用PDF预览" onclick="changePreviewType('pdf')"/>
 </#if>
+<script src="js/watermark.js" type="text/javascript"></script>
 <script>
     window.onload = function () {
         /*初始化水印*/
-        initWaterMark();
+        var watermarkTxt = '${watermarkTxt}';
+        if (watermarkTxt !== '') {
+            watermark.init({
+                watermark_txt: '${watermarkTxt}',
+                watermark_x: 0,
+                watermark_y: 0,
+                watermark_rows: 0,
+                watermark_cols: 0,
+                watermark_x_space: ${watermarkXSpace},
+                watermark_y_space: ${watermarkYSpace},
+                watermark_font: '${watermarkFont}',
+                watermark_fontsize: '${watermarkFontsize}',
+                watermark_color:'${watermarkColor}',
+                watermark_alpha: ${watermarkAlpha},
+                watermark_width: ${watermarkWidth},
+                watermark_height: ${watermarkHeight},
+                watermark_angle: ${watermarkAngle},
+            });
+        }
         checkImgs();
     };
     window.onscroll = throttle(checkImgs);

server/src/main/resources/web/pdf.ftl

@@ -5,7 +5,16 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0">
     <title>PDF预览</title>
-    <#include "*/commonHeader.ftl">
+    <style type="text/css">
+        * {
+            margin: 0;
+            padding: 0;
+        }
+        html, body {
+            height: 100%;
+            width: 100%;
+        }
+    </style>
 </head>
 <body>
     <#if pdfUrl?contains("http://") || pdfUrl?contains("https://")>
@@ -15,11 +24,10 @@
     </#if>
     <iframe src="" width="100%" frameborder="0"></iframe>
     <#if "false" == switchDisabled>
-    <img src="images/jpg.svg" width="63" height="63"
-         style="position: fixed; cursor: pointer; top: 40%; right: 48px; z-index: 999;" alt="使用图片预览" title="使用图片预览"
-         onclick="goForImage()"/>
+       <img src="images/jpg.svg" width="63" height="63" style="position: fixed; cursor: pointer; top: 40%; right: 48px; z-index: 999;" alt="使用图片预览" title="使用图片预览" onclick="goForImage()"/>
     </#if>
 </body>
+<script src="js/watermark.js" type="text/javascript"></script>
 <script type="text/javascript">
     document.getElementsByTagName('iframe')[0].src = "${baseUrl}pdfjs/web/viewer.html?base=${baseUrl}&file="+encodeURIComponent('${finalUrl}')+"&disabledownload=${pdfDownloadDisable}";
     document.getElementsByTagName('iframe')[0].height = document.documentElement.clientHeight-10;
@@ -40,10 +48,27 @@
         }
         window.location.href=url;
     }
-
     /*初始化水印*/
     window.onload = function() {
-        initWaterMark();
+        var watermarkTxt = '${watermarkTxt}';
+        if (watermarkTxt !== '') {
+            watermark.init({
+                watermark_txt: '${watermarkTxt}',
+                watermark_x: 0,
+                watermark_y: 0,
+                watermark_rows: 0,
+                watermark_cols: 0,
+                watermark_x_space: ${watermarkXSpace},
+                watermark_y_space: ${watermarkYSpace},
+                watermark_font: '${watermarkFont}',
+                watermark_fontsize: '${watermarkFontsize}',
+                watermark_color:'${watermarkColor}',
+                watermark_alpha: ${watermarkAlpha},
+                watermark_width: ${watermarkWidth},
+                watermark_height: ${watermarkHeight},
+                watermark_angle: ${watermarkAngle},
+            });
+        }
     }
 </script>
 </html>

server/src/main/resources/web/picture.ftl

@@ -4,20 +4,25 @@
     <meta charset="utf-8" />
     <title>图片预览</title>
     <link rel="stylesheet" href="css/viewer.min.css">
-    <script src="js/viewer.min.js"></script>
-    <#include "*/commonHeader.ftl">
     <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+        html, body {
+            height: 100%;
+            width: 100%;
+        }
         body {
             background-color: #404040;
         }
-        #image { width: 800px; margin: 0 auto; font-size: 0;}
-        #image li {  display: inline-block;width: 50px;height: 50px; margin-left: 1%; padding-top: 1%;}
+        #dowebok { width: 800px; margin: 0 auto; font-size: 0;}
+        #dowebok li {  display: inline-block;width: 50px;height: 50px; margin-left: 1%; padding-top: 1%;}
         /*#dowebok li img { width: 200%;}*/
     </style>
 </head>
 <body>
-
-<ul id="image">
+<ul id="dowebok">
     <#list imgUrls as img>
         <#if img?contains("http://") || img?contains("https://")>
             <#assign img="${img}">
@@ -27,9 +32,11 @@
         <li><img id="${img}"  url="${img}" src="${img}" width="1px" height="1px"></li>
     </#list>
 </ul>
-
+<script src="js/jquery-3.0.0.min.js"></script>
+<script src="js/viewer.min.js"></script>
+<script src="js/watermark.js" type="text/javascript"></script>
 <script>
-    var viewer = new Viewer(document.getElementById('image'), {
+    var viewer = new Viewer(document.getElementById('dowebok'), {
         url: 'src',
         navbar: false,
         button: false,
@@ -37,10 +44,61 @@
         loop : true
     });
     document.getElementById("${currentUrl}").click();
-
+    // 修改下一页按钮的样式和位置
+    $(function () {
+        var outHandler = function(){
+            $(this).css('background-color','rgba(0, 0, 0, 0)');
+        };
+        var overHandler = function(){
+            $(this).css('background-color','rgba(0, 0, 0, .5)');
+        };
+        var next = $("li[data-action=next]");
+        var prev = $("li[data-action=prev]");
+        var viewerToolBar = $(".viewer-footer");
+        // 覆盖按钮父类原始样式
+        viewerToolBar.css("overflow", "visible");
+        // 获取文档高度、宽度
+        var clientHeight = window.innerHeight;
+        var clientWidth = window.innerWidth;
+        // 调整样式
+        var styleCss = {},nextCss={},prevCss={};
+        styleCss.position = "absolute";
+        styleCss.top = -clientHeight;
+        styleCss.width = clientWidth*0.1;
+        styleCss.height = clientHeight + 52;
+        // 覆盖原始样式
+        styleCss.backgroundColor='rgba(0, 0, 0, 0)';
+        styleCss.borderRadius='inherit';
+        nextCss.right = "0";
+        prevCss.left = "0";
+        next.css($.extend(nextCss, styleCss));
+        prev.css($.extend(prevCss, styleCss));
+        next.on('mouseout',outHandler);
+        next.on('mouseover',overHandler);
+        prev.on('mouseout',outHandler);
+        prev.on('mouseover',overHandler);
+    });
     /*初始化水印*/
     window.onload = function() {
-        initWaterMark();
+        var watermarkTxt = '${watermarkTxt}';
+        if (watermarkTxt !== '') {
+            watermark.init({
+                watermark_txt: '${watermarkTxt}',
+                watermark_x: 0,
+                watermark_y: 0,
+                watermark_rows: 0,
+                watermark_cols: 0,
+                watermark_x_space: ${watermarkXSpace},
+                watermark_y_space: ${watermarkYSpace},
+                watermark_font: '${watermarkFont}',
+                watermark_fontsize: '${watermarkFontsize}',
+                watermark_color:'${watermarkColor}',
+                watermark_alpha: ${watermarkAlpha},
+                watermark_width: ${watermarkWidth},
+                watermark_height: ${watermarkHeight},
+                watermark_angle: ${watermarkAngle},
+            });
+        }
     }
 </script>
 </body>

server/src/main/resources/web/txt.ftl

@@ -4,49 +4,144 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0">
     <title>普通文本预览</title>
-    <#include  "*/commonHeader.ftl">
 </head>
 <body>
-
+<input hidden id="textType" value="${textType}"/>
 <input hidden id="textData" value="${textData}"/>
 
 <div class="container">
-    <div class="panel panel-default">
-        <div class="panel-heading">
-            <h4 class="panel-title">
-                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
-                    ${file.name}
-                </a>
-            </h4>
-        </div>
-        <div class="panel-body">
+    <#if textType?? && textType == "markdown">
+        <p>
+            <button id="markdown_btn" type="button" class="btn btn-primary">切换markdown</button>
+            <button id="text_btn" type="button" class="btn btn-primary">切换text</button>
+        </p>
+        <div id="markdown" style="padding: 18px;"></div>
+    <#elseif textType?? && textType == "xml" >
+        <div id="xml" style="padding: 18px;"></div>
+    <#else>
         <div id="text"></div>
-        </div>
-    </div>
+    </#if>
 </div>
 
+<link rel="stylesheet" href="css/xmlTreeViewer.css"/>
+<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
+
+<script src="js/jquery-3.0.0.min.js" type="text/javascript"></script>
+<script src="js/jquery.form.min.js" type="text/javascript"></script>
+<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
+<script src="js/watermark.js" type="text/javascript"></script>
+<script src="js/marked.min.js" type="text/javascript"></script>
+<script src="js/xmlTreeViewer.js" type="text/javascript"></script>
+<script src="js/base64.min.js" type="text/javascript"></script>
 
 <script>
     /**
      * 初始化
      */
     window.onload = function () {
+        $("#markdown_btn").hide()
         initWaterMark();
+        fetchData();
         loadText();
+        loadXmlData()
+        loadMarkdown();
+    }
+
+    /**
+     * 初始化水印
+     */
+    function initWaterMark() {
+        let watermarkTxt = '${watermarkTxt}';
+        if (watermarkTxt !== '') {
+            watermark.init({
+                watermark_txt: '${watermarkTxt}',
+                watermark_x: 0,
+                watermark_y: 0,
+                watermark_rows: 0,
+                watermark_cols: 0,
+                watermark_x_space: ${watermarkXSpace},
+                watermark_y_space: ${watermarkYSpace},
+                watermark_font: '${watermarkFont}',
+                watermark_fontsize: '${watermarkFontsize}',
+                watermark_color: '${watermarkColor}',
+                watermark_alpha: ${watermarkAlpha},
+                watermark_width: ${watermarkWidth},
+                watermark_height: ${watermarkHeight},
+                watermark_angle: ${watermarkAngle},
+            });
+        }
+    }
+
+    /**
+     * 获取文本数据
+     */
+    function fetchData() {
+        window.textData = Base64.decode($("#textData").val())
+        window.textPreData = "<pre>" + window.textData + "</pre>";
     }
 
     /**
      *加载普通文本
      */
     function loadText() {
-        var textData = Base64.decode($("#textData").val())
-        var textPreData = "<pre style='background-color: #FFFFFF;border:none'>" + textData + "</pre>";
-
-        $("#text").html(textPreData);
+        $("#text").html(window.textPreData);
     }
 
-</script>
+    /**
+     * 加载markdown
+     */
+    function loadMarkdown() {
+        if ($("#textType").val() === "markdown") {
+            window.textMarkdownData = marked(window.textData);
+            $("#markdown").html(window.textMarkdownData);
+        }
+    }
 
+    /**
+     * 加载xml数据
+     */
+    function loadXmlData() {
+        if ($("#textType").val() === "xml") {
+            var xmlNode = xmlTreeViewer.parseXML(window.textData);
+            var retNode = xmlTreeViewer.getXMLViewerNode(xmlNode.xml);
+            $("#xml").html(retNode);
+        }
+    }
+
+    $(function () {
+        $("#markdown_btn").click(function () {
+            $("#markdown").html(window.textMarkdownData);
+            $("#text_btn").show()
+            $("#markdown_btn").hide()
+        });
+
+        $("#text_btn").click(function () {
+            $("#markdown_btn").show()
+            $("#text_btn").hide();
+            $("#markdown").html(window.textPreData);
+        });
+    });
+
+</script>
+<style>
+    * {
+        margin: 0;
+        padding: 0;
+    }
+
+    html, body {
+        height: 100%;
+        width: 100%;
+    }
+
+    #markdown, #xml {
+        height: 97%;
+        max-height: 97%;
+        border: 1px solid #ece7e7;
+        overflow-y: scroll;
+        width: 100%;
+    }
+</style>
 </body>
 
 </html>

server/src/main/resources/web/xml.ftl

@@ -1,51 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0">
-    <title>xml文本预览</title>
-    <#include  "*/commonHeader.ftl">
-    <link rel="stylesheet" href="css/xmlTreeViewer.css"/>
-    <script src="js/xmlTreeViewer.js" type="text/javascript"></script>
-</head>
-<body>
-
-<input hidden id="textData" value="${textData}"/>
-<div class="container">
-    <div class="panel panel-default">
-        <div class="panel-heading">
-            <h4 class="panel-title">
-                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
-                     ${file.name}
-                </a>
-            </h4>
-        </div>
-        <div class="panel-body">
-            <div id="xml"></div>
-        </div>
-    </div>
-</div>
-
-<script>
-    /**
-     * 初始化
-     */
-    window.onload = function () {
-        initWaterMark();
-        loadXmlData()
-    }
-
-    /**
-     * 加载xml数据
-     */
-    function loadXmlData() {
-        var textData = Base64.decode($("#textData").val())
-        var xmlNode = xmlTreeViewer.parseXML(textData);
-        var retNode = xmlTreeViewer.getXMLViewerNode(xmlNode.xml);
-        $("#xml").html(retNode);
-    }
-
-</script>
-</body>
-
-</html>