|
|
@@ -18,7 +18,7 @@
|
|
|
<script type="text/javascript" src="bootstrap-table/bootstrap-table.min.js"></script>
|
|
|
<script type="text/javascript" src="js/base64.min.js"></script>
|
|
|
<style>
|
|
|
- .alert{
|
|
|
+ .alert {
|
|
|
width: 50%;
|
|
|
}
|
|
|
</style>
|
|
|
@@ -26,51 +26,62 @@
|
|
|
|
|
|
<body>
|
|
|
|
|
|
- <!-- Fixed navbar -->
|
|
|
- <nav class="navbar navbar-inverse navbar-fixed-top">
|
|
|
- <div class="container">
|
|
|
+<!-- Fixed navbar -->
|
|
|
+<nav class="navbar navbar-inverse navbar-fixed-top">
|
|
|
+ <div class="container">
|
|
|
<div class="navbar-header">
|
|
|
- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
|
|
- <span class="sr-only">Toggle navigation</span>
|
|
|
- <span class="icon-bar"></span>
|
|
|
- <span class="icon-bar"></span>
|
|
|
- <span class="icon-bar"></span>
|
|
|
- </button>
|
|
|
- <a class="navbar-brand" href="https://kkview.cn" target='_blank'>kkFileView</a>
|
|
|
+ <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
|
|
|
+ aria-expanded="false" aria-controls="navbar">
|
|
|
+ <span class="sr-only">Toggle navigation</span>
|
|
|
+ <span class="icon-bar"></span>
|
|
|
+ <span class="icon-bar"></span>
|
|
|
+ <span class="icon-bar"></span>
|
|
|
+ </button>
|
|
|
+ <a class="navbar-brand" href="https://kkview.cn" target='_blank'>kkFileView</a>
|
|
|
</div>
|
|
|
<div id="navbar" class="navbar-collapse collapse">
|
|
|
- <ul class="nav navbar-nav">
|
|
|
- <li class="active"><a href="./index">首页</a></li>
|
|
|
- <li><a href="./record">版本发布记录</a></li>
|
|
|
- <li><a href="./comment">相关交流</a></li>
|
|
|
- </ul>
|
|
|
+ <ul class="nav navbar-nav">
|
|
|
+ <li class="active"><a href="./index">首页</a></li>
|
|
|
+ <li><a href="./integrated">接入说明</a></li>
|
|
|
+ <li><a href="./record">版本发布记录</a></li>
|
|
|
+ </ul>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </nav>
|
|
|
+ </div>
|
|
|
+</nav>
|
|
|
|
|
|
- <div class="container theme-showcase" role="main">
|
|
|
- <#-- 接入说明 -->
|
|
|
- <div class="page-header">
|
|
|
- <h1>接入说明</h1>
|
|
|
- </div>
|
|
|
- <div class="well">
|
|
|
- <div style="font-size: 16px;">
|
|
|
- 如果你的项目需要接入文件预览项目，达到对docx、excel、ppt、jpg等文件的预览效果，那么通过在你的项目中加入下面的代码就可以成功实现：
|
|
|
- <p style="background-color: #2f332a;color: #cccccc;font-size: 14px;padding:10px;margin-top:10px;">
|
|
|
- var url = 'http://127.0.0.1:8080/file/test.txt'; //要预览文件的访问地址 <br>
|
|
|
- window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(base64Encode(url)));
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <div style="font-size: 16px;">
|
|
|
- 新增多图片同时预览功能，接口如下：
|
|
|
- <p style="background-color: #2f332a;color: #cccccc;font-size: 14px;padding:10px;margin-top:10px;">
|
|
|
- var fileUrl =url1+'|'+url2;//多url使用'|'字符隔开 <br>
|
|
|
- window.open('http://127.0.0.1:8012/picturesPreview?urls='+encodeURIComponent(base64Encode(fileUrl)));
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <#-- 输入下载地址预览文件 -->
|
|
|
- <div class="panel panel-success">
|
|
|
+<div class="container theme-showcase" role="main">
|
|
|
+ <#-- 接入说明 -->
|
|
|
+ <div class="page-header">
|
|
|
+ <h1>支持的文件类型</h1>
|
|
|
+ 我们一直在扩展支持的文件类型，不断优化预览的效果，如果您有什么建议，欢迎在kk开源社区留意反馈：<a target='_blank' href="https://t.zsxq.com/09ZHSXbsQ">https://t.zsxq.com/09ZHSXbsQ</a>。
|
|
|
+ </div>
|
|
|
+ <div >
|
|
|
+ <ol>
|
|
|
+ <li>支持 doc, docx, xls, xlsx, xlsm, ppt, pptx, csv, tsv, dotm, xlt, xltm, dot, dotx,xlam, xla 等 Office 办公文档</li>
|
|
|
+ <li>支持 wps, dps, et, ett, wpt 等国产 WPS Office 办公文档</li>
|
|
|
+ <li>支持 odt, ods, ots, odp, otp, six, ott, fodt, fods 等OpenOffice、LibreOffice 办公文档</li>
|
|
|
+ <li>支持 vsd, vsdx 等 Visio 流程图文件</li>
|
|
|
+ <li>支持 wmf, emf 等 Windows 系统图像文件</li>
|
|
|
+ <li>支持 psd 等 Photoshop 软件模型文件</li>
|
|
|
+ <li>支持 pdf ,ofd, rtf 等文档</li>
|
|
|
+ <li>支持 xmind 软件模型文件</li>
|
|
|
+ <li>支持 bpmn 工作流文件</li>
|
|
|
+ <li>支持 eml 邮件文件</li>
|
|
|
+ <li>支持 epub 图书文档</li>
|
|
|
+ <li>支持 obj, 3ds, stl, ply, gltf, glb, off, 3dm, fbx, dae, wrl, 3mf, ifc, brep, step, iges, fcstd, bim 等 3D 模型文件</li>
|
|
|
+ <li>支持 dwg, dxf 等 CAD 模型文件</li>
|
|
|
+ <li>支持 txt, xml(渲染), md(渲染), java, php, py, js, css 等所有纯文本</li>
|
|
|
+ <li>支持 zip, rar, jar, tar, gzip, 7z 等压缩包</li>
|
|
|
+ <li>支持 jpg, jpeg, png, gif, bmp, ico, jfif, webp 等图片预览（翻转，缩放，镜像）</li>
|
|
|
+ <li>支持 tif, tiff 图信息模型文件</li>
|
|
|
+ <li>支持 tga 图像格式文件</li>
|
|
|
+ <li>支持 svg 矢量图像格式文件</li>
|
|
|
+ <li>支持 mp3,wav,mp4,flv 等音视频格式文件</li>
|
|
|
+ <li>支持 avi,mov,rm,webm,ts,rm,mkv,mpeg,ogg,mpg,rmvb,wmv,3gp,ts,swf 等视频格式转码预览</li>
|
|
|
+ </ol>
|
|
|
+ </div>
|
|
|
+ <#-- 输入下载地址预览文件 -->
|
|
|
+ <div class="panel panel-success">
|
|
|
<div class="panel-heading">
|
|
|
<h3 class="panel-title">输入下载地址预览文件</h3>
|
|
|
</div>
|
|
|
@@ -89,7 +100,7 @@
|
|
|
<button id="previewByUrl" type="button" class="btn btn-success">预览</button>
|
|
|
</form>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
<#-- 预览测试 -->
|
|
|
<div class="panel panel-success">
|
|
|
<div class="panel-heading">
|
|
|
@@ -104,15 +115,16 @@
|
|
|
<button type="button" class="btn btn-default" id="fileSelectBtn" style="margin-bottom:8px">
|
|
|
<span class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></span> 选择文件
|
|
|
</button>
|
|
|
- <input type="file" name="file" style="display: none" id="fileSelect" onchange="onFileSelected()"/>
|
|
|
+ <input type="file" name="file" style="display: none" id="fileSelect"
|
|
|
+ onchange="onFileSelected()"/>
|
|
|
<div class="alert alert-danger alert-dismissable hide" role="alert" id="postFileAlert">
|
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
|
<span aria-hidden="true">×</span>
|
|
|
</button>
|
|
|
<strong>请选择需要上传的文件！</strong>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <button id="btnSubmit" type="button" class="btn btn-success">上 传</button>
|
|
|
+ </div>
|
|
|
+ <button id="btnSubmit" type="button" class="btn btn-success">上 传</button>
|
|
|
</form>
|
|
|
</div>
|
|
|
</#if>
|
|
|
@@ -168,12 +180,12 @@
|
|
|
$(".loading_container").css("height", height).show();
|
|
|
}
|
|
|
|
|
|
- function onFileSelected(){
|
|
|
+ function onFileSelected() {
|
|
|
var file = $("#fileSelect").val();
|
|
|
$("#fileName").text(file);
|
|
|
}
|
|
|
|
|
|
- function checkUrl(url){
|
|
|
+ function checkUrl(url) {
|
|
|
//url= 协议://(ftp的登录信息)[IP|域名](:端口号)(/或?请求参数)
|
|
|
var strRegex = '^((https|http|ftp)://)'//(https或http或ftp)
|
|
|
+ '(([\\w_!~*\'()\\.&=+$%-]+: )?[\\w_!~*\'()\\.&=+$%-]+@)?' //ftp的user@ 可有可无
|
|
|
@@ -186,7 +198,7 @@
|
|
|
+ '(:[0-9]{1,5})?' // 端口- :80 ,1-5位数字
|
|
|
+ '((/?)|' // url无参数结尾 - 斜杆或这没有
|
|
|
+ '(/[\\w_!~*\'()\\.;?:@&=+$,%#-]+)+/?)$';//请求参数结尾- 英文或数字和[]内的各种字符
|
|
|
- var re = new RegExp(strRegex,'i');//i不区分大小写
|
|
|
+ var re = new RegExp(strRegex, 'i');//i不区分大小写
|
|
|
//将url做uri转码后再匹配，解除请求参数中的中文和空字符影响
|
|
|
if (re.test(encodeURI(url))) {
|
|
|
return (true);
|
|
|
@@ -215,39 +227,39 @@
|
|
|
return data;
|
|
|
});
|
|
|
|
|
|
- $('#previewByUrl').on('click',function() {
|
|
|
+ $('#previewByUrl').on('click', function () {
|
|
|
var _url = $("#_url").val();
|
|
|
if (!checkUrl(_url)) {
|
|
|
$("#previewCheckAlert").addClass("show");
|
|
|
- window.setTimeout(function(){
|
|
|
+ window.setTimeout(function () {
|
|
|
$("#previewCheckAlert").removeClass("show");
|
|
|
- },3000);//显示的时间
|
|
|
+ }, 3000);//显示的时间
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
var b64Encoded = Base64.encode(_url);
|
|
|
|
|
|
- window.open('${baseUrl}onlinePreview?url='+encodeURIComponent(b64Encoded));
|
|
|
+ window.open('${baseUrl}onlinePreview?url=' + encodeURIComponent(b64Encoded));
|
|
|
});
|
|
|
|
|
|
- $('#fileSelectBtn').on('click',function() {
|
|
|
+ $('#fileSelectBtn').on('click', function () {
|
|
|
$('#fileSelect').click();
|
|
|
});
|
|
|
|
|
|
$("#btnSubmit").click(function () {
|
|
|
var _fileName = $("#fileName").text()
|
|
|
- var index= _fileName.lastIndexOf(".");
|
|
|
+ var index = _fileName.lastIndexOf(".");
|
|
|
//获取后缀
|
|
|
- var ext = _fileName.substr(index+1);
|
|
|
- if (!ext || ext == "dll"|| ext == "exe"|| ext == "msi" ){
|
|
|
- window.alert(ext+"不支持上传")
|
|
|
- return ;
|
|
|
- }
|
|
|
- if(!_fileName){
|
|
|
+ var ext = _fileName.substr(index + 1);
|
|
|
+ if (!ext || ext == "dll" || ext == "exe" || ext == "msi") {
|
|
|
+ window.alert(ext + "不支持上传")
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!_fileName) {
|
|
|
$("#postFileAlert").addClass("show");
|
|
|
- window.setTimeout(function(){
|
|
|
+ window.setTimeout(function () {
|
|
|
$("#postFileAlert").removeClass("show");
|
|
|
- },3000);//显示的时间
|
|
|
+ }, 3000);//显示的时间
|
|
|
return;
|
|
|
}
|
|
|
showLoadingDiv();
|
kl