Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 8dbb228617 |
@ -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" --]
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -2,49 +2,51 @@
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
|
||||
<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"/>
|
||||
<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>
|
||||
<script type="text/javascript" src="js/base64.min.js"></script>
|
||||
<script type="text/javascript" src="js/base64.min.js" ></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="panel-group container" id="accordion">
|
||||
<h1>文件预览项目接入和测试界面</h1>
|
||||
|
||||
<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 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(base64Encode(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(base64Encode(fileUrl)));
|
||||
</pre>
|
||||
<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(base64Encode(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(base64Encode(fileUrl)));
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -57,100 +59,104 @@
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<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 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 data-toggle="collapse" data-parent="#accordion"
|
||||
href="#collapseThree">
|
||||
更新记录
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div>
|
||||
2020年12月27日 ：<br>
|
||||
2020年年终大版本更新，架构全面设计，代码全面重构，代码质量全面提升，二次开发更便捷，欢迎拉源码品鉴，提issue、pr共同建设<br>
|
||||
1. 架构模块调整,大量的代码重构，代码质量提升N个等级，欢迎品鉴<br>
|
||||
2. 增强XML文件预览效果，新增XML文档数结构预览<br>
|
||||
3. 新增markdown文件预览支持，预览支持md渲染和源文本切换支持<br>
|
||||
4. 切换底层web server为jetty，解决这个issue：<a href="https://github.com/kekingcn/kkFileView/issues/168">#issues/168</a><br>
|
||||
5. 引入cpdetector，解决文件编码识别问题<br>
|
||||
6. url采用base64+urlencode双编码，彻底解决各种奇葩文件名预览问题<br>
|
||||
7. 新增配置项office.preview.switch.disabled，控制offic文件预览切换开关<br>
|
||||
8. 优化文本类型文件预览逻辑，采用Base64传输内容，避免预览时再次请求文件内容<br>
|
||||
9. office预览图片模式禁用图片放大效果，达到图片和pdf预览效果一致的体验<br>
|
||||
10. 直接代码静态设置pdfbox兼容低版本jdk，在IDEA中运行也不会有警告提示<br>
|
||||
11. 移除guava、hutool等非必须的工具包，减少代码体积<br>
|
||||
12. Office组件加载异步化，提速应用启动速度最快到5秒内<br>
|
||||
13. 合理设置预览消费队列的线程数<br>
|
||||
14. 修复压缩包里文件再次预览失败的bug<br>
|
||||
15. 修复图片预览的bug<br><br>
|
||||
<div id="collapseThree" class="panel-collapse collapse in">
|
||||
<div class="panel-body">
|
||||
<div>
|
||||
2020年12月27日 ：<br>
|
||||
2020年年终大版本更新，架构全面设计，代码全面重构，代码质量全面提升，二次开发更便捷，欢迎拉源码品鉴，提issue、pr共同建设
|
||||
1. 架构模块调整,大量的代码重构，代码质量提升N个等级，欢迎品鉴<br>
|
||||
2. 增强XML文件预览效果，新增XML文档数结构预览<br>
|
||||
3. 新增markdown文件预览支持，预览支持md渲染和源文本切换支持<br>
|
||||
4. 切换底层web server为jetty，解决这个issue：<a href="https://github.com/kekingcn/kkFileView/issues/168">#issues/168</a><br>
|
||||
5. 引入cpdetector，解决文件编码识别问题<br>
|
||||
6. url采用base64+urlencode双编码，彻底解决各种奇葩文件名预览问题<br>
|
||||
7. 新增配置项office.preview.switch.disabled，控制offic文件预览切换开关<br>
|
||||
8. 优化文本类型文件预览逻辑，采用Base64传输内容，避免预览时再次请求文件内容<br>
|
||||
9. office预览图片模式禁用图片放大效果，达到图片和pdf预览效果一致的体验<br>
|
||||
10. 直接代码静态设置pdfbox兼容低版本jdk，在IDEA中运行也不会有警告提示<br>
|
||||
11. 移除guava、hutool等非必须的工具包，减少代码体积<br>
|
||||
12. Office组件加载异步化，提速应用启动速度最快到5秒内<br>
|
||||
13. 合理设置预览消费队列的线程数<br>
|
||||
14. 修复压缩包里文件再次预览失败的bug<br>
|
||||
15. 修复图片预览的bug<br><br>
|
||||
|
||||
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>
|
||||
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年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>
|
||||
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月19日 ：<br>
|
||||
1. 大文件入队提前处理<br>
|
||||
1. 新增addTask文件转换入队接口<br>
|
||||
1. 采用redis队列，支持kkFIleView接口和异构系统入队两种方式<br><br>
|
||||
|
||||
2018年01月15日 ：<br>
|
||||
1.首页新增社会化评论框<br><br>
|
||||
2018年01月15日 ：<br>
|
||||
1.首页新增社会化评论框<br><br>
|
||||
|
||||
2018年01月12日 ：<br>
|
||||
1.新增多图片同时预览<br>
|
||||
2.支持压缩包内图片轮番预览<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>
|
||||
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>
|
||||
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 id = "comments"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -184,9 +190,9 @@
|
||||
url: '${baseUrl}deleteFile?fileName=' + encodeURIComponent(fileName),
|
||||
success: function (data) {
|
||||
// 删除完成，刷新table
|
||||
if (1 === data.code) {
|
||||
if (1 == data.code) {
|
||||
alert(data.msg);
|
||||
} else {
|
||||
} else{
|
||||
$('#table').bootstrapTable('refresh', {});
|
||||
}
|
||||
},
|
||||
@ -195,7 +201,6 @@
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
$(function () {
|
||||
$('#table').bootstrapTable({
|
||||
url: 'listFiles',
|
||||
@ -206,14 +211,14 @@
|
||||
field: 'action',
|
||||
title: '操作'
|
||||
},]
|
||||
}).on('pre-body.bs.table', function (e, data) {
|
||||
}).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(Base64.encode('${baseUrl}' + item.fileName)) + "'>预览</a>" +
|
||||
"<a class='btn btn-default' href='javascript:void(0);' onclick='deleteFile(\"" + item.fileName + "\")'>删除</a>";
|
||||
item.action = "<a class='btn btn-default' target='_blank' href='${baseUrl}onlinePreview?url="+ encodeURIComponent(Base64.encode('${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) {
|
||||
}).on('post-body.bs.table', function (e,data) {
|
||||
return data;
|
||||
});
|
||||
|
||||
@ -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', {});
|
||||
|
||||
@ -1,118 +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>普通文本预览</title>
|
||||
</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>
|
||||
|
||||
<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/base64.min.js" type="text/javascript"></script>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 初始化
|
||||
*/
|
||||
window.onload = function () {
|
||||
$("#markdown_btn").hide()
|
||||
initWaterMark();
|
||||
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},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 加载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>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -6,29 +6,32 @@
|
||||
<title>普通文本预览</title>
|
||||
</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">
|
||||
<div id="text"></div>
|
||||
</div>
|
||||
</div>
|
||||
<#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>
|
||||
@ -36,8 +39,12 @@
|
||||
* 初始化
|
||||
*/
|
||||
window.onload = function () {
|
||||
$("#markdown_btn").hide()
|
||||
initWaterMark();
|
||||
fetchData();
|
||||
loadText();
|
||||
loadXmlData()
|
||||
loadMarkdown();
|
||||
}
|
||||
|
||||
/**
|
||||
@ -65,16 +72,56 @@
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取文本数据
|
||||
*/
|
||||
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);
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载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>
|
||||
* {
|
||||
@ -87,6 +134,13 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#markdown, #xml {
|
||||
height: 97%;
|
||||
max-height: 97%;
|
||||
border: 1px solid #ece7e7;
|
||||
overflow-y: scroll;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
|
||||
|
||||
@ -1,97 +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>普通文本预览</title>
|
||||
</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>
|
||||
|
||||
<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 () {
|
||||
initWaterMark();
|
||||
loadXmlData()
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化水印
|
||||
*/
|
||||
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},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 加载xml数据
|
||||
*/
|
||||
function loadXmlData() {
|
||||
var textData = Base64.decode($("#textData").val())
|
||||
var xmlNode = xmlTreeViewer.parseXML(textData);
|
||||
var retNode = xmlTreeViewer.getXMLViewerNode(xmlNode.xml);
|
||||
$("#xml").html(retNode);
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user