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服务器版，都需安装openOffice或LibreOffice，否则无法启动。

windows安装openOffice：https://www.openoffice.org/zh-cn/download/

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-button
    type="text"
    size="small"
    icon="el-icon-download"
    @click="download(scope.row, scope.index)"
>下载
</el-button>
// 以下新增一个预览按钮
<el-button
    type="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参数，只需给一个默认的文件名并指定相应后缀即可，如上代码所示。