问题
公司最近做的项目需要支持文件的在线预览功能,包括支持图片、文档(word、excel、ppt、pdf)、压缩包、音频(mp3)、视频(mp4)、代码(html、css、js、java、python)、脚本等格式的文件,如果自己去开发的太耗费人力和物力了,时间上也不允许,就想想有没有插件式的开源应用可以使用。经过查找,果然发现码云上有这开源的类似插件的工具。你要做的就是启动kkFIleView,把它集成进去你的项目中,完全不用编码,想着怎么兼容各种格式,完全就像使用插件一样方便。
现在就记录windows本地集成运行的过程,这里包括安装OpenOffice和安装在线预览的SpringBoot的程序两部分。
一、安装OpenOffice
1.下载windows版本的OpenOffice
下载地址:https://pc.qq.com/detail/13/detail_1253.html
2.双击exe文件开始进行安装
3.下面这个是安装文件Setup的暂存目录,不是真正的OpenOffice的安装路径,可以随便选一个目录
4.点击安装后会去到真正的OpenOffice安装向导,下一步后可以填写信息
5.下一步后一般会选择自定义
6.不断地下一步,选择安装的位置。
注意:一定要使用默认路径,不然在线预览程序启动使可能有问题(默认路径是:C:\Program Files (x86)\OpenOffice 4)
7.OpenOffice安装完成
二、本地(windows)安装在线预览程序
1.在码云上下载在线预览的程序压缩包
地址:https:///kekingcn/file-online-preview
2.下载之后使用idea编译器打开,用maven来下载相关依赖
3.windows本地跑起来,在线预览程序需要更改一下几个地方:
3.1 修改配置文件
路径:D:\kekingcn-file-online-preview\file-online-preview\server\src\main\config\application.properties
#office.home = C:\\Program Files (x86)\\OpenOffice 4
office.home = ${KK_OFFICE_HOME:defaul}
改为
office.home = C:\\Program Files (x86)\\OpenOffice 4
#office.home = ${KK_OFFICE_HOME:defaul}
3.2 修改ConfigUtils类
路径:D:\kekingcn-file-online-preview\file-online-preview\office-plugin\src\main\java\org\artofsolving\jodconverter\util\ConfigUtils.java
String userDir = System.getenv("KKFILEVIEW_BIN_FOLDER");
if (userDir == null) {
userDir = System.getProperty("user.dir");
System.out.println("userDir == null:" + userDir);
}
改为:
String userDir = System.getenv("KKFILEVIEW_BIN_FOLDER");
//TODO:windows下运行需要添加下面这一行,linux下则需要注释掉下面这一行(路径为你实际安装的路径)
userDir = "D:\\kekingcn-file-online-preview\\file-online-preview";
if (userDir == null) {
userDir = System.getProperty("user.dir");
System.out.println("userDir == null:" + userDir);
}
3.3 修改TrustHostFilter类
路径:D:\kekingcn-file-online-preview\file-online-preview\server\src\main\java\cn\keking\web\filter\TrustHostFilter.java
if(url != null){
url = new String(Base64Utils.decodeFromString(url), StandardCharsets.UTF_8);
}
改成:
if(url != null){
//TODO 更改路径
//url = new String(Base64Utils.decodeFromString(url), StandardCharsets.UTF_8);
url = url;
}
3.4 修改OnlinePreviewController类
路径:D:\kekingcn-file-online-preview\file-online-preview\server\src\main\java\cn\keking\web\controller\OnlinePreviewController.java
try {
fileUrl = url;
} catch (Exception ex) {
String errorMsg = String.format(BASE64_DECODE_ERROR_MSG, "url");
return otherFilePreview.notSupportedFile(model, errorMsg);
}
改成:
try {
//TODO 更改路径
// fileUrl = new String(Base64.decodeBase64(url), StandardCharsets.UTF_8);
fileUrl = url;
} catch (Exception ex) {
String errorMsg = String.format(BASE64_DECODE_ERROR_MSG, "url");
return otherFilePreview.notSupportedFile(model, errorMsg);
}
try {
fileUrls = urls;
} catch (Exception ex) {
String errorMsg = String.format(BASE64_DECODE_ERROR_MSG, "urls");
return otherFilePreview.notSupportedFile(model, errorMsg);
}
改成:
try {
//TODO 更改路径
// fileUrls = new String(Base64.decodeBase64(urls));
fileUrls = urls;
} catch (Exception ex) {
String errorMsg = String.format(BASE64_DECODE_ERROR_MSG, "urls");
return otherFilePreview.notSupportedFile(model, errorMsg);
}
4.使用maven的install来打包
5.在路径D:\kekingcn-file-online-preview\file-online-preview\server\target下可以看到刚才打的包
6.本地启动ServerMain服务
7.引入代码中
7.1. 普通文件下载url预览
当您的项目内需要预览文件时,只需要调用浏览器打开本项目的预览接口,并传入须要预览文件的url。
3.x.x 版本
<script type="text/javascript" src="https://cdn./npm/js-base64@3.6.0/base64.min.js"></script>var url = 'http://127.0.0.1:8080/file/test.txt'; //要预览文件的访问地址window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url)));
2.x.x 及以下版本
var url = 'http://127.0.0.1:8080/file/test.txt'; //要预览文件的访问地址window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(url));
7.2. http/https下载流url预览
很多系统内不是直接暴露文件下载地址,而是请求通过id、code等参数到通过统一的接口,后端通过id或code等参数定位文件,再通过OutputStream输出下载,此时下载url是不带文件后缀名的,预览时需要拿到文件名,传一个参数fullfilename=xxx.xxx来指定文件名,示例如下
3.x.x 版本
<script type="text/javascript" src="https://cdn./npm/js-base64@3.6.0/base64.min.js"></script>var originUrl = 'http://127.0.0.1:8080/filedownload?fileId=1'; //要预览文件的访问地址var previewUrl = originUrl + '&fullfilename=test.txt'window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(previewUrl)));
2.x.x 及以下版本
var originUrl = 'http://127.0.0.1:8080/filedownload?fileId=1'; //要预览文件的访问地址var previewUrl = originUrl + '&fullfilename=test.txt'window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(previewUrl));
备注:我司用SpringBoot返回接口是下载流的方式,所以选择7.2的 3.x.x 版本的方式进行引入。
8.文档在线预览展示