使用kkfileview实现web在线预览文件

场景：一个业务场景是，针对单据上传附件（放到FTP），后续通过web实现对附件的在线预览打印

使用工具 ：kkFileView

官网地址：https://kkfileview.keking.cn/zh-cn/index.html

码云地址：https://gitee.com/kekingcn/file-online-preview

阅读本文需要了解docke的基础指令

部署相关

官网地址有详细的部署，我这边采用的是docker。

步骤如下：

一、拉取镜像，获取配置文件

# 拉取kkfileView
$ docker pull keking/kkfileview

# 启动keking/kkfileview
$ docker run -it -d  -p 8012:8012 --name myfileview keking/kkfileview

# 创建容器配置文件的挂载目录
$ mkdir -p /home/fileView/conf

# 可以进入容器内部查看这个文件
$ docker exec -it  myfileview bash

# 通过拷贝容器内部到本地 (内部地址 外部地址)
$ docker cp myfileview:/opt/kkFileView-3.5.1/config/application.properties  /home/fileView/conf

# 强行停止并且删除容器
$ docker container rm -f myfileview

二、根据需要修改application.properties

#  我这里的需求是默认用pdf打开，以及把服务通过nginx反向代理 对application.properties的部分属性做了修改
# 修改了的配置
base.url = http://ip/preview
server.servlet.context-path= /preview

# 修改了默认打开为pdf
office.preview.type = ${KK_OFFICE_PREVIEW_TYPE:pdf}

三、在Nginx中添加如下配置

location /preview{
    proxy_pass http://ip:8012;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade"; 
    proxy_set_header Host $host:$server_port;  
    proxy_set_header X-Real-IP  $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
} 

四、后续操作

# 重启Nginx 到对应的sbin目录下
$ ./nginx -s reload

# docker启动kkfileview
# 指定挂载目录
$ docker run -it -d  -p 8012:8012 -v /home/fileview/application.properties:/opt/kkFileView-3.5.1/config/application.properties --name myfileview  keking/kkfileview

# 如果修改配置文件之后
$ docker container restart myfileview

记得ip替换为自己的ip地址。

使用 http://ip/preview 查看是否启动成功。

使用kkfileView进行前台预览

我这边使用的http/https下载流url预览 参考官方文档

 //要预览文件的访问地址 这里应该返回一个文件流
var originUrl = 'http://127.0.0.1:8080/filedownload?fileId=1';
// 注意指定文件后缀，比如上传的是docx 那么就应该是 xxx.docx 不然会乱码
var previewUrl = originUrl + '&fullfilename=test.txt' 
// 打开预览页面
window.open('http://ip/preview/onlinePreview?url='+encodeURIComponent(Base64.encode(previewUrl)));