前言:
官方文档: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
参数,只需给一个默认的文件名并指定相应后缀即可,如上代码所示。