SpringBoot实现主流办公文档在线预览

岳扬霸

↓推荐关注↓
项目简介

kkFileView为文件文档在线预览解决方案，该项目使用流行的spring boot搭建，易上手和部署，基本支持主流办公文档的在线预览，如doc,docx,xls,xlsx,ppt,pptx,pdf,txt,zip,rar,图片,视频,音频等等。
官网及文档
地址：https://kkfileview.keking.cn
开源地址：

• github：https://github.com/kekingcn/kkFileView/
  
• gitee：https://gitee.com/kekingcn/file-online-preview
  

在线体验
地址：https://file.keking.cn
项目文档（Project documentation）

• 详细wiki文档：https://gitee.com/kekingcn/file-online-preview/wikis/pages
  
• 中文文档：https://gitee.com/kekingcn/file-online-preview/blob/master/README.md
  
• English document：https://gitee.com/kekingcn/file-online-preview/blob/master/README.en.md
  

项目特性

• 一键部署，快速接入
  

支持Windows、Linux平台一键部署，两行js代码就可以接入预览

• 支持常见文件格式，兼容新版Office文档
  

支持文本、图片、Office文档、WPS文档、PDF、视频、音频、压缩包等常见文件类型预览

• 支持多种预览模式灵活切换
  

支持pdf、懒加载分页图、轮播图片等预览模式动态配置、灵活切换

• 独立部署，提供restful接口，适用于微服务场景
  

独立于业务系统外，提供restful http接口，开发语言无关，微服务场景下直接提供在线预览服务
更多特性

• 支持word excel ppt，pdf等办公文档
  
• 支持txt,java,php,py,md,js,css等所有纯文本
  
• 支持zip,rar,jar,tar,gzip等压缩包
  
• 支持jpg，jpeg，png，gif等图片预览（翻转，缩放，镜像）
  
• 支持mp3，mp4，flv等多媒体文件预览
  
• 使用spring boot开发，预览服务搭建部署非常简便
  
• rest接口提供服务，跨平台特性(java,php,python,go,php，....)都支持，应用接入简单方便
  
• 支持普通http/https文件下载url、http/https文件下载流url、ftp下载url等多种预览源
  
• 提供zip，tar.gz发行包，提供一键启动脚本和丰富的配置项，方便部署使用
  
• 提供Docker镜像发行包，方便在容器环境部署
  
• 抽象预览服务接口，方便二次开发，非常方便添加其他类型文件预览支持
  
• 最最重要Apache协议开源，代码pull下来想干嘛就干嘛
  

预览展示

1. 文本预览

支持所有类型的文本文档预览， 由于文本文档类型过多，无法全部枚举，默认开启的类型如下 txt,html,htm,asp,jsp,xml,json,properties,md,gitignore,log,java,py,c,cpp,sql,sh,bat,m,bas,prg,cmd
文本预览效果如下



2. 图片预览



3. word文档预览

支持doc，docx文档预览，word预览有两种模式：一种是每页word转为图片预览，另一种是整个word文档转成pdf，再预览pdf。两种模式的适用场景如下

• 图片预览：word文件大，前台加载整个pdf过慢
  
• pdf预览：内网访问，加载pdf快 图片预览模式预览效果如下
  

pdf预览模式预览效果如下



4. ppt文档预览

支持ppt，pptx文档预览，和word文档一样，有两种预览模式
图片预览模式预览效果如下


pdf预览模式预览效果如下



5. pdf文档预览

支持pdf文档预览，和word文档一样，有两种预览模式
图片预览模式预览效果如下


pdf预览模式预览效果如下



6. excel文档预览

支持xls，xlsx文档预览，预览效果如下


ps，如碰到excel预览乱码问题，可参考 预览乱码
7. 压缩文件预览

支持zip,rar,jar,tar,gzip等压缩包，预览效果如下


可点击压缩包中的文件名，直接预览文件，预览效果如下



8. 多媒体文件预览

理论上支持所有的视频、音频文件，由于无法枚举所有文件格式，默认开启的类型如下
mp3,wav,mp4,flv
如有没有未覆盖全面，可通过配置文件指定多媒体类型视频预览效果如下


音频预览效果如下



9. CAD文档预览

支持CAD dwg文档预览，和word文档一样，有两种预览模式
图片预览模式预览效果如下


pdf预览模式预览效果如下



快速开始

分发包支持Windows、Linux下直接解压部署、执行startup脚本直接启动；
应用程序只需两行js代码即可接入预览。
!image-20220703180126105
部署指南

1. 环境要求

• Java: 1.8+
  
• OpenOffice或LiberOffice(Windows下已内置，CentOS或Ubuntu下会自动下载安装，MacOS下需要自行安装)
  

2. 部署运行

1). 物理机或虚拟机上运行

• 从 码云发行版本 下载最新版发行包
  
• 解压kkFileView-x.x.x文件（Windows用.zip包，Linux/MacOS用.tar.gz包）
  
• 打开解压后文件夹的bin目录，运行startup脚本（Windows下以管理员身份运行 startup.bat，Linux以root用户运行 startup.sh）
  
• 浏览器访问本机8012端口 http://127.0.0.1:8012 即可看到项目演示用首页
  

2). Docker容器环境环境运行

• 拉取镜像
  

docker pull keking
/
kkfileview

• 运行
  

docker run
-
it
-
p
8012
:
8012
keking
/
kkfileview

• 浏览器访问容器8012端口 http://xxx.xxx.xxx.xxx:8012 即可看到项目演示用首页
  

3. 项目接入使用

当您的项目内需要预览文件时，只需要调用浏览器打开本项目的预览接口，并传入须要预览文件的url，示例如下：
3.x.x 及以上版本


<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-base64@3.6.0/base64.min.js"></script>

var url = 'http://127.0.0.1:8080/file/test.txt'; //要预览文件的访问地址
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(previewUrl)));2.x.x 及以下版本


var url = 'http://127.0.0.1:8080/file/test.txt'; //要预览文件的访问地址
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(previewUrl));使用指南

当您的项目内需要预览文件时，只需要调用浏览器打开本项目的预览接口，并传入须要预览文件的url。
注意，如果要预览的url里包含需要转义的特殊字符，如下表格，请使用encodeURIComponent(url)转义
1. 普通文件下载url预览

3.x.x 版本


<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-base64@3.6.0/base64.min.js"></script>

var url = 'http://127.0.0.1:8080/file/test.txt'; //要预览文件的访问地址
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url)));2.x.x 及以下版本


var url = 'http://127.0.0.1:8080/file/test.txt'; //要预览文件的访问地址
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(url));2. http/https下载流url预览

很多系统内不是直接暴露文件下载地址，而是请求通过id、code等参数到通过统一的接口，后端通过id或code等参数定位文件，再通过OutputStream输出下载，此时下载url是不带文件后缀名的，预览时需要拿到文件名，传一个参数 fullfilename=xxx.xxx来指定文件名，示例如下
3.x.x 版本


<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-base64@3.6.0/base64.min.js"></script>

var originUrl = 'http://127.0.0.1:8080/filedownload?fileId=1'; //要预览文件的访问地址
var previewUrl = originUrl + '&fullfilename=test.txt'
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(previewUrl)));2.x.x 及以下版本


var originUrl = 'http://127.0.0.1:8080/filedownload?fileId=1'; //要预览文件的访问地址
var previewUrl = originUrl + '&fullfilename=test.txt'
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(previewUrl));3. FTP下载url预览

1). FTP匿名访问

如果要预览的FTP url是可以匿名访问的（不需要用户名密码），则可以直接通过下载url预览，示例如下
3.x.x 版本
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-base64@3.6.0/base64.min.js"></script>

var url = 'ftp://127.0.0.1/file/test.txt'; //要预览文件的访问地址
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url)));2.x.x 及以下版本
var url = 'ftp://127.0.0.1/file/test.txt'; //要预览文件的访问地址
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(url));2). 非匿名访问，确定只有访问一台FTP服务器

如果预览服务只访问一台FTP服务器，只需要在配置文件中 配置FTP链接信息 ，则可以直接通过下载url预览，示例如下
3.x.x 版本
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-base64@3.6.0/base64.min.js"></script>

var url = 'ftp://127.0.0.1/file/test.txt'; //要预览文件的访问地址
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url)));2.x.x 及以下版本
var url = 'ftp://127.0.0.1/file/test.txt'; //要预览文件的访问地址
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(url));3). 非匿名访问，不只访问一台FTP服务器

如果预览服务要访问多台FTP服务器，且用户名密码不一致，可以通过在url中加入用户名密码等参数预览(url参数中的优化于配置文件中的)，示例如下
3.x.x 版本
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-base64@3.6.0/base64.min.js"></script>

var originUrl = 'ftp://127.0.0.1/file/test.txt'; //要预览文件的访问地址
var previewUrl = originUrl + '?ftp.username=xx&ftp.password=xx&ftp.control.encoding=xx';
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(previewUrl)));2.x.x 及以下版本
var originUrl = 'ftp://127.0.0.1/file/test.txt'; //要预览文件的访问地址
var previewUrl = originUrl + '?ftp.username=xx&ftp.password=xx&ftp.control.encoding=xx';
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(previewUrl));在线编辑

对 https://github.com/kekingcn/kkFileView/ 进行了二次开发。整合了openOffice进来，项目体积更大了！但使用和配置更简单，只需要配置redis即可。
码云:https://gitee.com/253281376/kkFileViewOfficeEdit.git
文件在线预览使用方法

IP+端口+项目名/onlinePreview?url=你的文件地址
http://127.0.0.1:8012/onlinePreview?url=http%3A%2F%2Flocalhost%3A8080%2F1.doc
注意传递的是地址，不要下载流，url需要进行encode！
文档在线编辑使用方法

IP+端口+项目名/onlineEdit?url=你的文件地址&callBack=回调地址
保存文档成功后，会触发回调，onlineEdit方法调用你传递来的回调地址，并把重新生成的文档下载地址传回去（参数名：downloadPath）
本项目做为独立预览和编辑服务，考虑到有可能两个项目部署到两台不同服务器，文件不互通，所以采用这样的方式
编辑地址示例：
http://127.0.0.1:8012/onlineEdit?callBack=localhost:8080/ZsContent/saveCallBack&url=http%3A%2F%2Fwww.xdocin.com%2Fdemo%2Fdemo.docx&fileId=yourId
url需要进行encode！回调地址不能带http://
如果还有其它参数，可以拼接到URL后面，回调时会一并传回
回调地址示例：http://localhost:8080/ZsContent/saveCallBack?downloadPath=http://127.0.0.1:8012/download?filename=D:/Users/chenkailing/test/a3ba6f7c-a989-4f47-8173-f795ff30a92b.doc&fileId=yourId
不兼容42版以上chrome,如需使用请切换为兼容模式，不能使用极速模式
PageOffice V4.0 标准版试用序列号：IMTG6-BSXJ-JGZ6-3BIWM
PageOffice V4.0 专业版试用序列号：CA1XB-MF7Y-12ST-PSBP2
文档编辑效果

doc编辑效果

考虑说明篇幅原因，就不贴其他格式文件的预览效果了，感兴趣的可以参考下面的实例搭建下
第一步：pull项目https://github.com/yijiusmile/kkFileViewOfficeEdit.git
第二步：配置redis地址，如下：

#=============================================#spring Redisson配置
spring.redisson.address = 192.168.1.204:6379
##资源映射路径(因为jar方式运行的原因)
file.dir = C:\\Users\\yudian\\Desktop\\dev\\第三步：运行FilePreviewApplication的main方法，服务启动后，访问http://localhost:8012/ 会看到如下界面，代表服务启动成功。



— THE END —

【免责声明】图文来自网络，版权归原作者所有。如侵权请联系删除；我们对文中观点保持中立，仅供参考、交流之目的。
推荐阅读

• 面向程序员的精品开源字体
  
• 被捧上天的Scrum敏捷管理为何不受大厂欢迎了？
  
• 可以替换CentOS的8种选择
  
• Grafana 9正式发布
  
• VS Code配置Python环境
  
• Sa-Token，一个开源、轻量级 java 权限认证框架，让鉴权变得简单、优雅！
  
• 搞了几年，基于QUIC的HTTP/3终于官宣了，编号RFC 9114
  
• 一款轻量级、开源、免费的PDF阅读器，SumatraPDF
  
• 用Go重写Node.js服务：项目性能提升5倍，内存减少40%
  
• 一个开箱即用，小而全而美的第三方登录开源组件，JustAuth
  

微信8.0将好友放开到了一万，宝宝们可以加我大号了，先到先得。

扫描下方二维码即可加我微信啦，2022，抱团取暖，一起牛逼。

产品+技术统称为大技术。分享优秀产品，传播产品思维；专注技术分享，包含JS、CSS、 HTML5、Vue、React、Augula、View UI(iView)、Element UI、Flutter、Electron和JAVA、JVM、SpringBoot、Dubbo、Spring Cloud/Alibaba、Docker、Docker Compose、K8S等实用技术与框架。



请我
分享、
赞、在看

本文来自公众号：大技术

赵福健

1v1飘过