增加OFD功能

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

@@ -15,6 +15,7 @@ public interface FilePreview {
     String MEDIA_FILE_PREVIEW_PAGE = "media";
     String PICTURE_FILE_PREVIEW_PAGE = "picture";
     String TIFF_FILE_PREVIEW_PAGE = "tiff";
+    String OFD_FILE_PREVIEW_PAGE = "ofd";
     String OFFICE_PICTURE_FILE_PREVIEW_PAGE = "officePicture";
     String TXT_FILE_PREVIEW_PAGE = "txt";
     String CODE_FILE_PREVIEW_PAGE = "code";

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

+package cn.keking.service.impl;
+
+import cn.keking.model.FileAttribute;
+import cn.keking.service.FilePreview;
+import org.springframework.stereotype.Service;
+import org.springframework.ui.Model;
+
+/**
+ * ofd 图片文件处理
+ * @author kl (http://kailing.pub)
+ * @since 2021/2/8
+ */
+@Service
+public class OfdFilePreviewImpl implements FilePreview {
+
+    private final PictureFilePreviewImpl pictureFilePreview;
+
+    public OfdFilePreviewImpl(PictureFilePreviewImpl pictureFilePreview) {
+        this.pictureFilePreview = pictureFilePreview;
+    }
+
+    @Override
+    public String filePreviewHandle(String url, Model model, FileAttribute fileAttribute) {
+        pictureFilePreview.filePreviewHandle(url,model,fileAttribute);
+        return OFD_FILE_PREVIEW_PAGE;
+    }
+}

server/src/main/resources/static/ofd/app.css

+.upload-icon[data-v-b0082a62]{padding-left:10px;padding-right:10px;background-color:#3b5fe8;border-color:#5867dd;color:#fff;margin:1px}.scale-icon[data-v-b0082a62],.upload-icon[data-v-b0082a62]{display:flex;cursor:pointer;justify-content:center;align-items:center;height:28px;border-radius:1px;font-weight:500;font-size:12px}.scale-icon[data-v-b0082a62]{width:33px;background-color:#f5f5f5;color:#333;text-align:center;padding:2px}.scale-icon[data-v-b0082a62] :active,.scale-icon[data-v-b0082a62] :hover{color:#3b5fe8}.text-icon[data-v-b0082a62]{display:flex;cursor:pointer;justify-content:center;align-items:center;height:28px;width:90%;background-color:#3b5fe8;border-radius:1px;border-color:#5867dd;font-weight:500;font-size:10px;color:#fff;margin-top:20px}.hidden[data-v-b0082a62]{display:none!important}.SealContainer[data-v-b0082a62]{z-index:99999;position:fixed;left:0;top:0;width:100vw;height:100vh}.SealContainer .mask[data-v-b0082a62]{background:#000;opacity:.3}.content-title[data-v-b0082a62]{font-size:16px;text-align:center;border-bottom:1px solid #3b5fe8;color:#3b5fe8;margin-top:10px}.SealContainer-content[data-v-b0082a62]{width:100%;height:100%}.SealContainer-content[data-v-b0082a62],.SealContainer-layout[data-v-b0082a62]{position:relative;overflow-y:auto;background:#fff;display:flex;flex-direction:column;padding:10px;align-items:center}.SealContainer-layout[data-v-b0082a62]{width:60%;height:80vh;z-index:100}.subcontent[data-v-b0082a62]{width:80%;display:flex;flex-direction:column;text-align:left;margin-bottom:10px;font-family:simsun}.subcontent .title[data-v-b0082a62]{font-weight:600}.subcontent .value[data-v-b0082a62]{font-weight:400;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.left-section[data-v-b0082a62]{position:fixed;width:88px;height:100%;background:#f5f5f5;border:1px solid #e8e8e8;align-items:center;display:flex;flex-direction:column}.main-section[data-v-b0082a62]{padding-top:20px;margin-left:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:grey;overflow:hidden}@media (max-width:767px){.SealContainer-layout[data-v-b0082a62]{position:relative;width:90%;height:90vh;overflow-y:auto;background:#fff;z-index:100;display:flex;flex-direction:column;padding:10px;align-items:center}.subcontent[data-v-b0082a62]{width:95%;display:flex;flex-direction:column;text-align:left;margin-bottom:10px;font-family:simsun}.left-section[data-v-b0082a62]{position:fixed;width:0;height:100%;background:#f5f5f5;border:1px solid #e8e8e8;align-items:center;display:none;flex-direction:column}.main-section[data-v-b0082a62]{padding-top:20px;margin-left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:grey;overflow:hidden}}#app{font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,微软雅黑,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50}body{margin:0}@font-face{font-family:sSun;src:url(fonts/xbst.5215475c.ttf)}@font-face{font-family:simsun;src:url(fonts/simsun.b4a89f58.ttf)}@font-face{font-family:simkai;src:url(fonts/simkai.6078b506.ttf)}@font-face{font-family:simfang;src:url(fonts/SIMFANG.65ab65f8.TTF)}@font-face{font-family:simhei;src:url(fonts/simhei.ab5640f6.ttf)}.gray{-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:grayscale(100%);filter:gray}
\ No newline at end of file

server/src/main/resources/static/ofd/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ofd.js</title>
+<link href="chunk-vendors.css" rel="stylesheet">
+<link href="app.css" rel="stylesheet">
+  </head>
+  <body>
+<div id="app">
+</div>
+<script type="text/javascript">
+
+</script>
+<script src="chunk-vendors.c0cd1494.js"></script>
+<script src="app.js"></script>
+</body>
+</html>
\ No newline at end of file

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

+<!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>OFD预览</title>
+    <#include "*/commonHeader.ftl">
+</head>
+<body>
+
+<iframe src="" width="100%" frameborder="0"></iframe>
+</body>
+<script type="text/javascript">
+    document.getElementsByTagName('iframe')[0].src = "${baseUrl}ofd/index.html?file=${currentUrl}";
+    document.getElementsByTagName('iframe')[0].height = document.documentElement.clientHeight - 10;
+    /**
+     * 页面变化调整高度
+     */
+    window.onresize = function () {
+        var fm = document.getElementsByTagName("iframe")[0];
+        fm.height = window.document.documentElement.clientHeight - 10;
+    }
+
+
+    /*初始化水印*/
+    window.onload = function () {
+        initWaterMark();
+    }
+</script>
+</html>
\ No newline at end of file