springboot整合kkFileView部署，前端使用

本文主要是介绍springboot整合kkFileView部署，前端使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言：

官方文档：https://kkfileview.keking.cn/zh-cn/docs/production.html

docker方式或加入星球获取发行包直接获取启动，无需以下步骤：

拉取镜像# 网络环境方便访问docker中央仓库
docker pull keking/kkfileview:4.1.0# 网络环境不方便访问docker中央仓库
wget https://kkfileview.keking.cn/kkFileView-4.1.0-docker.tar
docker load -i kkFileView-4.1.0-docker.tar运行
docker run -it -p 8012:8012 keking/kkfileview:4.1.0

kkFileView是一个很好的文件预览系统，初期开源维护时gitee和github上会直接提供发行包，现只有加入星球（99元一年）才能获取发行包。以下为源码方式部署使用细节。

1.下载源码（获取最新源码即可）
https://gitee.com/kekingcn/file-online-preview/tree/v4.4.0-beta/

2.IDE工具编译成jar包（无需更改任何文件）

3.jar包上传到服务器，这里分windows服务器和linux服务器版，windows下自带LibreOffice，linux需下载LibreOffice，否则无法启动。

linux安装LibreOffice：https://blog.csdn.net/an129/article/details/126766228?spm=1001.2014.3001.5506

安装完后执行java -jar kkFileView.jar即可，默认端口为8012，能访问到此页面并能在页面上正常预览则说明部署成功。

4.前端使用

安装 base64 编码解码：

npm install --save js-base64

在下载按钮下方新写一个预览按钮

<el-buttontype="text"size="small"icon="el-icon-download"@click="download(scope.row, scope.index)"
>下载
</el-button>
// 以下新增一个预览按钮
<el-buttontype="text"size="small"icon="el-icon-upload"@click="view(scope.row, scope.index)"
>预览
</el-button>

实现调用 view 方法

const handlePreview = (row: any, fileName: string, files: any) => {findObjectURL(fileName).then((response) => {window.open(`${store.getters['previewUrl']}/onlinePreview?url=` +encodeURIComponent(Base64.encode(response.data)) +`&fullfilename=test.${fileName.split('.')[1]}`,'_blank');});
};

注：此处需要传入url才能正常使用预览，但是kkFileView需要以正常文件后缀名结尾的url才能使用，如：http://127.0.0.1:8081?fileName = 1.xlsx格式。但一般系统都是以文件名或id请求后端接口获取的文件流数据，还有如minio等文件系统的临时文件url后面会跟一些权限信息，导致并不是以文件后缀结尾故预览失败。解决方法为：请求接口上提供了fullfilename参数，只需给一个默认的文件名并指定相应后缀即可，如上代码所示。

这篇关于springboot整合kkFileView部署，前端使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---