使用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)));

使用kkfileview实现web在线预览相关推荐

WEB在线预览PDF
这是我在博客园发表的第一篇文章.以后会陆续把在线预览其他格式文档的解决方案发表出来. 解决思路:把pdf转换成html显示. 在线预览pdf我暂时了解3种解决方案,欢迎大家补充. 方案一: 利用pdf ...
WEB在线预览PDF，WORD方案总结
好记忆不如烂笔头,能记下点东西,就记下点,有时间拿出来看看,也会发觉不一样的感受. 目录一.PDF的预览方式 1.PDFObject 2.PDF.JS 3.jsPDF 4.jQuery Media ...
二维三维图纸web在线预览
前言:因公司业务需求,需要实现dwg.dwf.stl.stp.x_t等二三维图纸在web端在线预览的功能.图纸兼容与浏览器兼容都很重要,经过这段时间的技术调研,基本确认了几种实现方案,选择(自主开发难 ...
java web在线预览pdf_JAVAWEB实现在线预览PDF
一.场景再现由于项目上传pdf文件后要实现在线预览(点击PDF) 二.实现方法 HTML:(传文件路径) JS: function openFile(filePath,wdbh,obj){ var ...
kkfileview预览html乱码,kkFileView(在线预览方案)
kkFileView是用spring boot搭建的一个在线预览方案,支持文档.纯文本.压缩包.视频.音频.图片等主流办公文档的在线预览,多种预览模式可灵活切换,独立部署,提供restful接口,适用 ...
WEB文档在线预览解决方案
WEB文档在线预览解决方案参考文章: (1)WEB文档在线预览解决方案 (2)https://www.cnblogs.com/lizhao123/p/11581971.html (3)https:/ ...
java flexpaper_java web word文件 pdf文件在线预览源码(flexpaper)
[实例简介]java web word文件 pdf文件在线预览源码经过测试 [实例截图] [核心代码] BrowsenOnline html, body{ height:100%; } body { ...
web office apps 在线预览实践
摘要在一些项目中需要在线预览office文档,包括word,excel,ppt等.达到预览文档的目的有很多方法,可以看我之前总结,在线预览的n种方案: [Asp.net]常见word,excel,p ...
借助office web apps实现在线预览和在线编辑
我所有的代码都是用go语言编写,你可以直接编译后使用,不用再有其他的操作. 最近项目实在太忙,这几天才有时间,这次是重头戏,要好好琢磨一下怎么写,才能更简洁的说清楚一切. 上一节,我们已经安装完毕,安 ...

使用kkfileview实现web在线预览