kkFileView 开源在线预览 支持pc端和移动端
一、前言
网页端一般会遇到各种文件，比如：txt、doc、docx、ofd、pdf、xml、xls、xlsx、ppt、pptx、zip、png、jpg等等。
有时候我们不想要把文件下载下来，而是想在线打开文件预览 ，这个时候如果每一种格式都需要我们去写代码造轮子去实现预览功能就太复杂了，并且自己实现的话会有很多兼容性问题。
这个时候 kkFileView 的出现就解决了我们的问题。
二、kkFileView介绍
kkFileView 为文件文档在线预览解决方案，该项目使用流行的spring boot搭建，易上手和部署，基本支持主流办公文档的在线预览，如doc,docx,xls,xlsx,ppt,pptx,pdf,txt,zip,rar,图片,视频,音频等等
三、kkFileView安装
部署指南参考kkFileView - 在线文件预览 下面介绍Windows、Linux、docker三种安装方式。
1.下载Windows或Linux的 v4.0.0 安装包 :
1.1 windows安装包下载 （链接：https://pan.baidu.com/s/1hZCP5jcD5cKd-xCsMHfYxg 提取码：7uwd）
1.2 linux安装包下载 （链接：https://pan.baidu.com/s/1grhyoIQ_Tr2NHyCZPFYDWg 提取码：13hj）
2.Windows上安装：
2.1 下载的 zip 压缩包解压后进入 bin 目录，双击 startup.bat 启动 kkFileView
2.2 30秒后进入 log 目录查看 kkFileView.log 日志，打印【kkFileView 服务启动完成，耗时:26.8350973s，演示页请访问: http://127.0.0.1:8012 】则说明启动成功。
3.Linux上安装（centos为例）：
3.1 root用户下将 kkFileView-4.0.0.tar.gz 上传到服务器 ，使用命令 tar -zxvf kkFileView-4.0.0.tar.gz 解压，开放 8012 端口。
3.2 root用户下解压后进入 kkFileView-4.0.0/bin 目录，执行 ./startup.sh 开始安装和启动，安装过程中会下载需要的组件需要输入y
3.3 安装字体。若不安装字体转化出的pdf文件可能会因为缺少字体乱码。
字体下载（链接：http://kkfileview.keking.cn/fonts.zip）
或者 百度云下载（链接：https://pan.baidu.com/s/1VMGERMHAI7W_Ys-MZC_YTQ 提取码：p6hq）
将下载的字体fonts.zip上传到 /usr/share/fonts 目录解压后执行命令 mkfontscale
若 mkfontscale 提示没有命令则先 yum install mkfontscale 安装命令
再分别依次执行 mkfontscale、mkfontdir、fc-cache 命令。
3.4 安装完成后 kkFileView-4.0.0/bin/ 目录下使用命令 ./showlog.sh 查看日志
如果出现： 【kkFileView 服务启动完成，耗时:5.99157928s，演示页请访问: http://127.0.0.1:8012 】，则表示安装启动成功。
3.5 如果日志提示报错信息【找不到office组件，请确认’office.home’配置是否有误 】。
（1）可能是 install.sh 中脚本有问题，尝试将脚本中的：
wget https://kkfileview.keking.cn/LibreOffice_7.1.4_Linux_x86-64_deb.tar.gz -cO LibreOffice_7_deb.gz && tar -zxf /tmp/LibreOffice_7_deb.tar.gz && cd /tmp/LibreOffice_7.1.4.2_Linux_x86-deb/RPMS
改为如下:
wget https://kkfileview.keking.cn/LibreOffice_7.1.4_Linux_x86-64_deb.tar.gz -cO LibreOffice_7_deb.tar.gz && tar -zxf /tmp/LibreOffice_7_deb.tar.gz && cd /tmp/LibreOffice_7.1.4.2_Linux_x86-64_deb/DEBS
然后重启 kkFileView 看问题是否还存在
(2) 若 install.sh 修改后问题依然存在，则需要下载 LibreOffice 组件安装。 LibreOffice下载 (链接：https://downloadarchive.documentfoundation.org/libreoffice/old/7.1.4.2/rpm/x86_64/)
或者：
百度云下载（链接：https://pan.baidu.com/s/18tLufbFQCOm11R7-U2f0-Q 提取码：0npj）将 LibreOffice_7.1.4.2_Linux_x86-64_rpm.tar.gz 上传服务器，然后解压后进入RPMS目录执行 yum localinstall *.rpm 进行安装。
3.6 如果日志提示报错信息【Caused by: java.lang.IllegalStateException: a process with acceptString ‘socket,host=127.0.0.1,port=2001’ is already running】
（1）用 ps -ef|grep java 命令查询出Java相关运行的进程，然后关闭kkFileView相关的进程，
并查看2001和2002端口的进程并关闭该进程。然后再执行 ./startup.sh 启动并查看日志。
（2）如果是安装在Linux上并且关闭了kkFileView相关的进程以及2001和2002端口，启动日志任
然存在该问题，那么可能是你远程连接服务器的软件导致的这个问题，改用window的cmd，
用ssh连接服务器启动程序尝试。
3.7 如果日志提示报错信息【Caused by: org.artofsolving.jodconverter.office.OfficeException: could not establish connection】，可参考 centos下启动失败：启动office组件失败，请检查office组件是否可用
四、kkFileView的配置和使用
1.修改启动脚本
测试发现如果 kkfileview 安装在 Windows 上预览 txt 文件会乱码，所以需要修改 kkfileview 的 bin 目录下的 startup.bat 脚本。
在最后一行的 java 后添加 -Dfile.encoding=UTF-8
修改后如下：
@echo off
set "KKFILEVIEW_BIN_FOLDER=%cd%"
cd "%KKFILEVIEW_BIN_FOLDER%"
echo Using KKFILEVIEW_BIN_FOLDER %KKFILEVIEW_BIN_FOLDER%
echo Starting kkFileView...
echo Please check log file in ../log/kkFileView.log for more information
echo You can get help in our official homesite: https://kkFileView.keking.cn
echo If this project is helpful to you, please star it on https://gitee.com/kekingcn/file-online-preview/stargazers
java -Dfile.encoding=UTF-8 -Dspring.config.location=..\config\application.properties -jar kkFileView-4.0.0.jar -> ..\log\kkFileView.log
2.关闭演示页面
kkFileView安装启动成功后可以打开 http://安装的ip:8012 （或者本机 http://127.0.0.1:8012） 查看演示页面上传文件以及查看预览效果。
如果项目上线后为了安全要关闭演示页面，可以在修改 kkFileView 安装目录的config文件夹中的 application.properties配置文件，将 file.upload.disable 设置为 true 禁用演示首页的文件上传。
如果你要隐藏演示页面，可以使用 ngnix 将 http://ip:8012 和 http://ip:8012/index 代理到其他页面。
其他配置可根据 官网配置说明 进行配置。
4.kkFileView的使用
kkFileView 的使用有两种方式，一种是通过提供文件的 url 地址来预览；一种是通过提供一个接口，该接口返回文件流来预览。
（参照官网使用说明：使用说明）
(1) 通过文件的 url 地址预览
示例 ：
var url = 'http://127.0.0.1:8080/file/test.txt'; //要预览文件的访问地址
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(url));
(2) 通过文件接口返回文件流预览
示例：
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-base64@3.6.0/base64.min.js"></script>
//假设你项目的后端文件接口是 http://127.0.0.1:8080/filedownload 该接口返回文件流，并且假设该接口接受fileId 参数
var originUrl = 'http://127.0.0.1:8080/filedownload?fileId=1'; //要预览文件的访问地址，该接口返回文件流
var previewUrl = originUrl + '&fullfilename=test.txt'//fullfilename是必须的，有了该参数kkFileView才知道文件名是什么
//kkFileView 的 onlinePreview 接口就会拿着参数去请求 http://127.0.0.1:8080/filedownload 接口，把文件下载到安装目录的 file/demo 文件夹下，然后转换后把预览界面展示到浏览器。
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(previewUrl)));
当然，为了文件安全和实效性，你可以在你的接口中加入token或者其他校验参数，满足了才能下载文件。
比如：
<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?token=sgdfhkkmlk&time=1659006176&fileID=4564sfd&filename=test.xls'; //要预览文件的访问地址，该接口返回文件流
var previewUrl = originUrl + '&fullfilename=test.xls'//fullfilename是必须的，该参数是kkFileView保存的文件名
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(previewUrl)));
注意：
encodeURIComponent(Base64.encode(previewUrl))
这里因为编码问题我踩过坑，所以需要注意下当使用 base64 对 previewUrl 进行编码时，如果采用MIME友好型 base64 加密会导致长度每大于 76 就会加入\r 或者 \n 这样的换行控制符，这样再使用encodeURIComponent进行编码就会产生 %0A 这样的字符，就会导致预览不了。解决办法就是base64编码后去除 \r 和 \n 然后再使用 encodeURIComponent 编码，encodeURIComponent 编码后再去除 %0A
