index.ftl
18.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
<!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>
<script type="text/javascript" src="js/base64.min.js"></script>
</head>
<body>
<div class="panel-group container" id="accordion">
<h1>文件预览项目接入和测试界面</h1>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
url接入方式说明
</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'; //要预览文件的访问地址
var token = ''; // 当前登录用户的token
window.open('${filePreviewBaseUrl}onlinePreview?url='+encodeURIComponent(base64Encode(url))+'&token='+token);
</pre>
</div>
<div>
新增多图片同时预览功能，接口如下：
<pre style="background-color: #2f332a;color: #cccccc">
var fileUrl =url1+"|"+"url2";//多文件使用“|”字符隔开
var token = ''; // 当前登录用户的token
window.open('${filePreviewBaseUrl}picturesPreview?urls='+encodeURIComponent(base64Encode(fileUrl))+'&token='+token);
</pre>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
fileId接入方式说明
</a>
</h4>
</div>
<div class="panel-body">
<div>
如果你的项目需要接入文件预览项目，达到对docx、excel、ppt、jpg等文件的预览效果，那么通过在你的项目中加入下面的代码就可以
成功实现： baseUrl 为portal 或者 km 服务的地址
<pre style="background-color: #2f332a;color: #cccccc">
var fileId = '1'; //要预览文件的附件id
var token = ''; // 当前登录用户的token
window.open('${filePreviewBaseUrl}onlinePreview?fileId='+fileId+'&token='+token;
</pre>
</div>
<div>
新增多图片同时预览功能，接口如下：
<pre style="background-color: #2f332a;color: #cccccc">
var imageFileIds =imageFileId1+"|"+imageFileId2;//多文件使用“|”字符隔开
var token = '';// 当前登录用户同token
window.open('${filePreviewBaseUrl}imagesPreview?imageFileIds='+imageFileIds+'&token='+token);
</pre>
</div>
<div>
如果是fileId的方式接入，需要在file模块 或者km 模块实现接口FileInfoService,下面是file模块下的实现类代码
<pre style="background-color: #2f332a;color: #cccccc">
@Service
@Primary
public class PortalFileInfoServiceImpl implements FileInfoService {
@Resource
FileManager fileManager;
public byte[] getFileBytesById(@ApiParam(name = "fileId", value = "附件ID") @RequestParam String fileId) throws Exception {
return fileManager.getFileBytesById(fileId);
}
public FileAttribute getFileAttributeByFileId(@ApiParam(name = "fileId", value = "附件ID") @RequestParam String fileId) {
return fileManager.getFileAttributeByFileId(fileId);
}
}
</pre>
</div>
<div>
如果是fileId的方式接入，提供了接口来判断是否有预览权限,file和km 如果需要实现自定义文件的权限规则需要实现FilePreviewPermissionService接口并且
使用注解@Primary,示例代码如下
<pre style="background-color: #2f332a;color: #cccccc">
@Service
@Primary
public class KMFilePreviewPermissionService implements FilePreviewPermissionService {
@Override
public boolean canPreviewFile(String fileId) {
return true;
}
}
</pre>
</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 class="panel-body">
<#if fileUploadDisable == false>
<div style="padding: 10px">
<form enctype="multipart/form-data" id="fileUpload">
<input type="file" name="file"/>
<input type="button" id="btnSubmit" value=" 上 传 "/>
</form>
</div>
</#if>
<div>
<table id="table" data-pagination="true"></table>
</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 class="panel-body">
<div>
2021年7月6日，v4.0.0 版本 :<br>
1. 底层集成OpenOffice替换为LibreOffice，Office文件兼容性增强，预览效果提升<br>
2. 修复压缩文件目录穿越漏洞<br>
3. 修复PPT预览使用PDF模式无效<br>
4. 修复PPT图片预览模式前端显示异常<br>
5. 新增功能：首页文件上传功能可通过配置实时开启或禁用<br>
6. 优化增加Office进程关闭日志<br>
7. 优化Windows环境下，查找Office组件逻辑(内置的LibreOffice优先)<br>
8. 优化启动Office进程改同步执行<br><br>
2021年6月17日，v3.6.0版本 ：<br>
ofd 类型文件支持版本，本次版本重要功能均由社区开发贡献，感谢 @gaoxingzaq、@zhangxiaoxiao9527 的代码贡献<br>
1、新增 ofd 类型文件预览支持，ofd 是国产的类似 pdf 格式的文件<br>
2、新增了 ffmpeg 视频文件转码预览支持，打开转码功能后，理论上支持所有主流视频的预览，如 rm、rmvb、flv 等<br>
3、美化了 ppt、pptx 类型文件预览效果，比之前版本好看太多<br>
4、更新了 pdfbox、xstream、common-io 等依赖的版本<br><br>
2021年1月28日 ：<br>
2020农历年最后一个版本发布，主要包含了部分 UI 改进，和解决了 QQ 群友、 Issue 里反馈的 Bug 修复，最最重要的是发个新版，过个好年<br>
1、引入galimatias,解决不规范文件名导致文件下载异常<br>
2、更新index接入演示界面UI风格<br>
3、更新markdown文件预览UI风格<br>
4、更新XML文件预览UI风格，调整类文本预览架构，更方便扩展<br>
5、更新simTxT文件预览UI风格<br>
6、 调整多图连续预览上下翻图的UI<br>
7、采用apache-common-io包简化所有的文件下载io操作<br>
8、XML文件预览支持切换纯文本模式<br>
9、增强url base64解码失败时的提示信息<br>
10、修复导包错误以及图片预览 bug<br>
11、修复发行包运行时找不到日志目录的问题<br>
12、修复压缩包内多图连续预览的bug<br>
13、修复大小写文件类型后缀没通用匹配的问题<br>
14、指定Base64转码采用Apache Commons-code中的实现，修复base64部分jdk版本下出现的异常<br>
15、修复类文本类型HTML文件预览的bug<br>
16、修复：dwg文件预览时无法在jpg和pdf两种类型之间切换<br>
17、escaping of dangerous characters to prevent reflected xss<br>
18、修复重复编码导致文档转图片预览失败的问题&编码规范<br><br>
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>
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 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: '${filePreviewBaseUrl}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: '${filePreviewBaseUrl}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='${filePreviewBaseUrl}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) {
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: '${filePreviewBaseUrl}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>