分享

kkFIleView实现在线预览文件的功能(windows环境

 hncdman 2022-04-08

问题

公司最近做的项目需要支持文件的在线预览功能,包括支持图片、文档(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.文档在线预览展示

在这里插入图片描述

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多