open-source/file-online-preview
1
0
Fork 0
mirror of https://gitee.com/kekingcn/file-online-preview.git synced 2026-04-09 09:47:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

调整项目模块，jodconverter-core重命名为office-plugin。jdocnverter-web重命名为server

Browse Source
This commit is contained in:
chenkailing
2020-12-26 17:30:24 +08:00
committed by kl
parent 0f4f1d580b
commit 41cdc227b3
4382 changed files with 2240 additions and 83394 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
server/src/main/resources/web/compress.ftl Normal file
View File

@@ -0,0 +1,134 @@
<!DOCTYPE html>
<html lang="en">
<head>
<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">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
}
body {
background-color: #404040;
}
h1, h2, h3, h4, h5, h6 {color: #2f332a;font-weight: bold;font-family: Helvetica, Arial, sans-serif;padding-bottom: 5px;}
h1 {font-size: 24px;line-height: 34px;text-align: center;}
h2 {font-size: 14px;line-height: 24px;padding-top: 5px;}
h6 {font-weight: normal;font-size: 12px;letter-spacing: 1px;line-height: 24px;text-align: center;}
a {color:#3C6E31;text-decoration: underline;}
a:hover {background-color:#3C6E31;color:white;}
input.radio {margin: 0 2px 0 8px;}
input.radio.first {margin-left:0;}
input.empty {color: lightgray;}
code {color: #2f332a;}
div.zTreeDemoBackground {width:600px;text-align:center;margin: 0 auto;background-color: #ffffff;}
</style>
</head>
<body>
<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">
var data = JSON.parse('${fileTree}');
var setting = {
view: {
fontCss : {"color":"blue"},
showLine: true
},
data: {
key: {
children: 'childList',
name: 'originName'
}
},
callback:{
beforeClick:function (treeId, treeNode, clickFlag) {
console.log("节点参数：treeId-" + treeId + "treeNode-"
+ JSON.stringify(treeNode) + "clickFlag-" + clickFlag);
},
onClick:function (event, treeId, treeNode) {
if (!treeNode.directory) {
/**实现窗口最大化**/
var fulls = "left=0,screenX=0,top=0,screenY=0,scrollbars=1"; //定义弹出窗口的参数
if (window.screen) {
var ah = screen.availHeight - 30;
var aw = (screen.availWidth - 10) / 2;
fulls += ",height=" + ah;
fulls += ",innerHeight=" + ah;
fulls += ",width=" + aw;
fulls += ",innerWidth=" + aw;
fulls += ",resizable"
} else {
fulls += ",resizable"; // 对于不支持screen属性的浏览器，可以手工进行最大化。 manually
}
window.open("onlinePreview?url="
+ encodeURIComponent("${baseUrl}" + treeNode.fileName)+"&fileKey="+ encodeURIComponent(treeNode.fileKey), "_blank",fulls);
}
}
}
};
var height = 0;
$(document).ready(function(){
var treeObj = $.fn.zTree.init($("#treeDemo"), setting, data);
treeObj.expandAll(true);
height = getZtreeDomHeight();
$(".zTreeDemoBackground").css("height", height);
});
/*初始化水印*/
window.onload = function() {
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},
});
}
}
/**
* 计算ztreedom的高度
*/
function getZtreeDomHeight() {
return $("#treeDemo").height() > window.document.documentElement.clientHeight - 1
? $("#treeDemo").height() : window.document.documentElement.clientHeight - 1;
}
/**
* 页面变化调整高度
*/
window.onresize = function(){
height = getZtreeDomHeight();
$(".zTreeDemoBackground").css("height", height);
}
/**
* 滚动时调整高度
*/
window.onscroll = function(){
height = getZtreeDomHeight();
$(".zTreeDemoBackground").css("height", height);
}
</script>
</body>
</html>

42
server/src/main/resources/web/fileNotSupported.ftl Normal file
View File

@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style type="text/css">
body{
margin: 0 auto;
width:900px;
background-color: #CCB;
}
.container{
width: 700px;
height: 700px;
margin: 0 auto;
}
img{
width:auto;
height:auto;
max-width:100%;
max-height:100%;
padding-bottom: 36px;
}
span{
display: block;
font-size:20px;
color:blue;
}
</style>
</head>
<body>
<div class="container">
<img src="images/sorry.jpg" />
<span>
该文件类型(${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>
</div>
</body>
</html>

66
server/src/main/resources/web/flv.ftl Normal file
View File

@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>多媒体文件预览</title>
<script src="js/flv.min.js"type="text/javascript"></script>
<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;
}
.m {
width: 1024px;
margin: 0 auto;
}
</style>
<body>
<div class="m">
<video width="1024" id="videoElement"></video>
</div>
<script>
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url: '${mediaUrl}'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
/*初始化水印*/
window.onload = function() {
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>
</html>

54
server/src/main/resources/web/html.ftl Normal file
View File

@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0">
<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;
/**
* 页面变化调整高度
*/
window.onresize = function(){
var fm = document.getElementsByTagName("iframe")[0];
fm.height = window.document.documentElement.clientHeight-10;
}
/*初始化水印*/
window.onload = function() {
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>

247
server/src/main/resources/web/index.ftl Normal file
View File

@@ -0,0 +1,247 @@
<!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>kkFileView演示首页</title>
<link rel="stylesheet" href="css/viewer.min.css" />
<link rel="stylesheet" href="css/loading.css" />
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="bootstrap-table/bootstrap-table.min.css" />
<link rel="stylesheet" href="gitalk/gitalk.css" />
<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="js/jquery.form.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="gitalk/gitalk.min.js"></script>
</head>
<body>
<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>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<div>
如果你的项目需要接入文件预览项目，达到对docx、excel、ppt、jpg等文件的预览效果，那么通过在你的项目中加入下面的代码就可以
成功实现：
<pre style="background-color: #2f332a;color: #cccccc">
var url = 'http://127.0.0.1:8080/file/test.txt'; //要预览文件的访问地址
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(url));
</pre>
</div>
<div>
新增多图片同时预览功能，接口如下：
<pre style="background-color: #2f332a;color: #cccccc">
var fileUrl =url1+"|"+"url2";//多文件使用“|”字符隔开
window.open('http://127.0.0.1:8012/picturesPreview?urls='+encodeURIComponent(fileUrl));
</pre>
</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="#collapseTwo">
预览测试
</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=" 上 传 " />
</form>
</div>
<div>
<table id="table" data-pagination="true"></table>
</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>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse in">
<div class="panel-body">
<div>
2020年05月20日 ：<br>
1. 新增支持全局水印，并支持通过参数动态改变水印内容<br>
2. 新增支持CAD文件预览<br>
3. 新增base.url配置，支持使用nginx反向代理和使用context-path<br>
4. 支持所有配置项支持从环境变量里读取，方便Docker镜像部署和集群中大规模使用<br>
5. 支持配置限信任站点（只能预览来自信任点的文件源），保护预览服务不被滥用<br>
6. 支持配置自定义缓存清理时间（cron表达式）<br>
7. 全部能识别的纯文本直接预览，不用再转跳下载，如.md .java .py等<br>
8. 支持配置限制转换后的PDF文件下载<br>
9. 优化maven打包配置，解决 .sh 脚本可能出现换行符问题<br>
10. 将前端所有CDN依赖放到本地，方便没有外网连接的用户使用<br>
11. 首页评论服务由搜狐畅言切换到Gitalk<br>
12. 修复url中包含特殊字符可能会引起的预览异常<br>
13. 修复转换文件队列addTask异常<br>
14. 修复其他已经问题<br>
15. 官网建设：<a href="https://kkfileview.keking.cn">https://kkfileview.keking.cn</a><br>
16. 官方Docker镜像仓库建设：<a href="https://hub.docker.com/r/keking/kkfileview">https://hub.docker.com/r/keking/kkfileview</a><br><br>
2019年06月18日 ：<br>
1. 支持自动清理缓存及预览文件<br>
2. 支持http/https下载流url文件预览<br>
3. 支持FTP url文件预览<br>
4. 加入Docker构建<br><br>
2019年04月08日 ：<br>
1. 缓存及队列实现抽象，提供JDK和REDIS两种实现(REDIS成为可选依赖)<br>
2. 打包方式提供zip和tar.gz包，并提供一键启动脚本<br><br>
2018年01月19日 ：<br>
1. 大文件入队提前处理<br>
1. 新增addTask文件转换入队接口<br>
1. 采用redis队列，支持kkFIleView接口和异构系统入队两种方式<br><br>
2018年01月15日 ：<br>
1.首页新增社会化评论框<br><br>
2018年01月12日 ：<br>
1.新增多图片同时预览<br>
2.支持压缩包内图片轮番预览<br><br>
2018年01月02日 ：<br>
1.修复txt等文本编码问题导致预览乱码<br>
2.修复项目模块依赖引入不到的问题<br>
3.新增spring boot profile，支持多环境配置<br>
4.引入pdf.js预览doc等文件，支持doc标题生成pdf预览菜单，支持手机端预览<br><br>
2017年12月12日：<br>
1.项目gitee开源:<a href="https://gitee.com/kekingcn/file-online-preview" target="_blank">https://gitee.com/kekingcn/file-online-preview</a><br>
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>
</div>
</div>
<div class="loading_container">
<div class="spinner">
<div class="spinner-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>
</div>
<script>
function deleteFile(fileName) {
$.ajax({
url: '${baseUrl}deleteFile?fileName=' + encodeURIComponent(fileName),
success: function (data) {
// 删除完成，刷新table
if (1 == data.code) {
alert(data.msg);
} else{
$('#table').bootstrapTable('refresh', {});
}
},
error: function (data) {
console.log(data);
}
})
}
$(function () {
$('#table').bootstrapTable({
url: 'listFiles',
columns: [{
field: 'fileName',
title: '文件名'
}, {
field: 'action',
title: '操作'
},]
}).on('pre-body.bs.table', function (e,data) {
// 每个data添加一列用来操作
$(data).each(function (index, item) {
item.action = "<a class='btn btn-default' target='_blank' href='${baseUrl}onlinePreview?url="+ encodeURIComponent('${baseUrl}' + item.fileName) +"'>预览</a>" +
"<a class='btn btn-default' href='javascript:void(0);' onclick='deleteFile(\""+item.fileName+"\")'>删除</a>";
});
return data;
}).on('post-body.bs.table', function (e,data) {
return data;
});
function showLoadingDiv() {
var height = window.document.documentElement.clientHeight - 1;
$(".loading_container").css("height", height).show();
}
$("#btnsubmit").click(function () {
showLoadingDiv();
$("#fileUpload").ajaxSubmit({
success: function (data) {
// 上传完成，刷新table
if (1 == data.code) {
alert(data.msg);
} else {
$('#table').bootstrapTable('refresh', {});
}
$(".loading_container").hide();
},
error: function () {
alert('上传失败，请联系管理员');
$(".loading_container").hide();
},
url: 'fileUpload', /*设置post提交到的页面*/
type: "post", /*设置表单以post方法提交*/
dataType: "json" /*设置返回值类型为文本*/
});
});
var gitalk = new Gitalk({
clientID: '525d7f16e17aab08cef5',
clientSecret: 'd1154e3aee5c8f1cbdc918b5c97a4f4157e0bfd9',
repo: 'kkFileView',
owner: 'kekingcn',
admin: ['kekingcn,klboke,gitchenjh'],
language: 'zh-CN',
id: location.pathname,
distractionFreeMode: false
})
gitalk.render((document.getElementById('comments')))
});
</script>
</body>
</html>

58
server/src/main/resources/web/media.ftl Normal file
View File

@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>多媒体文件预览</title>
<link rel="stylesheet" href="plyr/plyr.css" />
<script type="text/javascript" src="plyr/plyr.js"></script>
<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;
}
</style>
</head>
<body>
<div class="m">
<video>
<source src="${mediaUrl}" />
</video>
</div>
<script>
plyr.setup();
window.onload = function() {
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>
</html>

41
server/src/main/resources/web/notTrustHost.html Normal file
View File

@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style type="text/css">
body {
margin: 0 auto;
width: 900px;
background-color: #CCB;
}
.container {
width: 700px;
height: 700px;
margin: 0 auto;
}
img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
padding-bottom: 36px;
}
p {
display: block;
font-size: 20px;
color: blue;
}
</style>
</head>
<body>
<div class="container">
<img src="images/sorry.jpg" />
<p>
预览源文件来自不受信任的站点：<span style="color: red; display: inline;">${current_host}</span> ,请联系管理员 <br>
有任何疑问，请加&nbsp;<a href="https://jq.qq.com/?_wv=1027&k=5c0UAtu">官方QQ群：613025121</a>&nbsp;咨询
</p>
</div>
</body>
</html>

81
server/src/main/resources/web/officePicture.ftl Normal file
View File

@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>PDF图片预览</title>
<script src="js/lazyload.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
}
body {
background-color: #404040;
}
.container {
width: 100%;
height: 100%;
}
.img-area {
text-align: center
}
</style>
</head>
<body>
<div class="container">
<#list imgurls as img>
<div class="img-area">
<img class="my-photo" alt="loading" data-src="${img}" src="images/loading.gif">
</div>
</#list>
</div>
<#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 () {
/*初始化水印*/
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);
function changePreviewType(previewType) {
var url = window.location.href;
if (url.indexOf("officePreviewType=image") !== -1) {
url = url.replace("officePreviewType=image", "officePreviewType="+previewType);
} else {
url = url + "&officePreviewType="+previewType;
}
if ('allImages' === previewType) {
window.open(url)
} else {
window.location.href = url;
}
}
</script>
</body>
</html>

74
server/src/main/resources/web/pdf.ftl Normal file
View File

@@ -0,0 +1,74 @@
<!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>PDF预览</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<#if pdfUrl?contains("http://") || pdfUrl?contains("https://")>
<#assign finalUrl="${pdfUrl}">
<#else>
<#assign finalUrl="${baseUrl}${pdfUrl}">
</#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()"/>
</#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;
/**
* 页面变化调整高度
*/
window.onresize = function(){
var fm = document.getElementsByTagName("iframe")[0];
fm.height = window.document.documentElement.clientHeight-10;
}
function goForImage() {
var url = window.location.href;
if (url.indexOf("officePreviewType=pdf") != -1) {
url = url.replace("officePreviewType=pdf", "officePreviewType=image");
} else {
url = url + "&officePreviewType=image";
}
window.location.href=url;
}
/*初始化水印*/
window.onload = function() {
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>

106
server/src/main/resources/web/picture.ftl Normal file
View File

@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>图片预览</title>
<link rel="stylesheet" href="css/viewer.min.css">
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
}
body {
background-color: #404040;
}
#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="dowebok">
<#list imgUrls as img>
<#if img?contains("http://") || img?contains("https://")>
<#assign img="${img}">
<#else>
<#assign img="${baseUrl}${img}">
</#if>
<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('dowebok'), {
url: 'src',
navbar: false,
button: false,
backdrop: false,
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() {
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>
</html>

147
server/src/main/resources/web/txt.ftl Normal file
View File

@@ -0,0 +1,147 @@
<!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>普通文本预览</title>
</head>
<body>
<input hidden id="textType" value="${textType}"/>
<input hidden id="textData" value="${textData}"/>
<div class="container">
<#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>
</#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() {
$("#text").html(window.textPreData);
}
/**
* 加载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>