使用kkfileview实现web在线预览

使用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)));
  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值