@@ -2,51 +2,49 @@
< 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 >
< h1 > 文件预览项目接入和测试界面 < / h1 >
< div class = " panel - group " id= " accordion " >
< 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 " >
<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(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 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>
@@ -59,104 +57,100 @@ window.open('http://127.0.0.1:8012/picturesPreview?urls='+encodeURIComponent(bas
</a>
</h4>
</div>
<div id= " collapseTwo " class= " panel - collapse collapse " >
<div class = " panel - body " >
<div s tyl e= " padding : 10px " >
<form enc type= " multipart / form - data " id = " fileUpload " >
<input type= " file " nam e= " file " />
<input type= " button " id= " btnsubmit " value= " 上 传 " / >
</form >
</ div>
<div >
<table id= " table " data-pagination= " true " ></table>
</div>
<div class= " panel - body " >
<div style = " padding : 10px " >
<form enc typ e= " multipart / form - data " id= " fileUpload " >
<input type= " file " name = " file " / >
<input type= " button " id= " btnubmit " valu e= " 上 传 " />
</form >
</div >
< 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 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共同建设
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 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 >
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>
< / div >
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 id= " comments " ></div>
</div>
</div>
@@ -190,9 +184,9 @@ window.open('http://127.0.0.1:8012/picturesPreview?urls='+encodeURIComponent(bas
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', {});
}
},
@@ -201,6 +195,7 @@ window.open('http://127.0.0.1:8012/picturesPreview?urls='+encodeURIComponent(bas
}
})
}
$(function () {
$('#table').bootstrapTable({
url: 'listFiles',
@@ -211,14 +206,14 @@ window.open('http://127.0.0.1:8012/picturesPreview?urls='+encodeURIComponent(bas
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 ;
} ) ;
@@ -228,12 +223,12 @@ window.open('http://127.0.0.1:8012/picturesPreview?urls='+encodeURIComponent(bas
$ ( " .loading_container " ) . css ( " height " , height ) . show ( ) ;
}
$ ( " #btns ubmit " ) . click ( function ( ) {
$ ( " #btnS ubmit " ) . click ( function ( ) {
showLoadingDiv ( ) ;
$ ( " #fileUpload " ) . ajaxSubmit ( {
success : function ( data ) {
// 上传完成, 刷新table
if ( 1 = = data . code ) {
if ( 1 = = = data . code ) {
alert ( data . msg ) ;
} else {
$ ( ' # table ' ) . bootstrapTable ( ' refresh ' , { } ) ;