基于开源项目kkFileView打造文件预览

1、需求

一般管理系统都有文件上传功能基于此一般会诞生一个需求用户需要在线预览自己上传的文件。需求很合理但是没那么好做原因在于浏览器默认支持图片、pdf等少量格式预览而实际情况是你并不能要求用户只上传pdf对于可能excel和word是非常多的。所以在线预览文件是必不可少的了。

前置解释
1、 文件地址预览上传文件后可以获取文件的完整地址的方式这里分为两种
① 开放文件比如阿里云对象存储COS访问的地址其实就是真正的文件地址
② 其他文件地址比如文件服务器的部分情况这种地址一般存在防盗链之类的并不属于真正的开放文件。
2、文件下载流文件上传后获得的路径时后台接口地址并不能直接获取文件比如MongoDB的文件上传这种文件一般时属于私密文件的虽然一般也可直接通过接口地址的方式访问文件但是很有可能开发者会在后来对你的访问进行拦截。

2、解决方案

2.1 解决方案一基于浏览器的文件预览

2.1.1 使用方法

此种方案为最常见的不多做描述。

2.1.2 适用范围

文件路径 + 下载流的PDF、HTML、图片等文件预览这个主要是浏览器自带的功能。

2.1.3 优点

方便、简单

2.1.4 缺点

可预览文件类型较少常见的office类的word、excel是不支持的。

2.2 解决方案二基于微软的office预览

2.2.1 使用方法

http://view.officeapps.live.com/op/view.aspx?src=<Document Location>

前面是固定的到 src 后面跟的是自己文件的路径例图如下

2.2.2 适用范围

开放路径的office类文件。
开放路径常见的如腾讯阿里的对象存储 COS
office类文件比如常见的word、excel、ppt等其他office系的文件。

2.2.3 优点

简单不需要做过多处理只要前端在访问路径前面加一段路径即可支持大部分文件预览。

2.2.4 缺点

因为适用范围限制如果文件路径为非开放下载流、有防盗链等是没办法获取到文件进行展示的。

2.3 解决方案三基于kkFileView预览

2.3.1 使用方法

参考文档kkFileView使用指南

2.3.2 适用范围

根据官方的宣传基本上我们能平时接触到的文件格式都支持还支持文件地址 + 文件下载流的文件方式。

2.3.3 优点

支持文件类型多样服务部署后前端只需简单操作即可完成还能对文件进行水印等操作。

2.3.4 缺点

① 需要单独部署服务
② 真实使用比宣传难。

3、kkFileView的安装和注意点

其实就kkFileView的名气还是挺大的就我目前使用的情况而言确实也挺好的但是缺点也不少比如使用中的缺陷而且这个项目的社区活跃性一般去gitee上面很多issue并没人回答解决也正是因为这样才写下这个博客记录下一些问题也希望能帮助到小伙伴们。

3.1 下载

下载地址gitee开源项目kkFileView

本博客写作于2022.02.23此时最新版本为4.0版本分为Windows和LinuxMacOS的Windows的就不多说了大家自行安装下一步吧接下来的内容基于centos7的服务器进行安装操作。

3.2 上传部署

下载好版本解压之后直接上传到服务器我是上传到 /opt目录如果不熟悉的小伙伴可以按照我的目录。

大致目录如上图注意我划线的两个sh后面会用到。下附一张kkFileView官网的运行方式

3.3 运行

此时我们已经完成下载和上传步骤并知晓官网上的运行方式
①切换至bin目录下命令cd /opt/kkFileView-4.0.0/bin
②执行startup.sh命令./startup.sh

由于服务器已经安装过了我就不截图了说说步骤比较简单大家看看就行。如果执行.sh文件提示没有权限执行下chmod 777 *.sh

完成上述步骤按照官网的意思应该是可以运行了但是大家注意看终端打印或者访问地址肯定是不能访问的明显就是报错了怎么看日志呢注意上面给大家截图的两个.sh文件。
③查看日志命令./showlog.sh日志很简单可以看出来就是一个问题没有office插件并没有像官网说的Centos会自动下载Windows没事反正我的centos7肯定没有
④下载office插件官网说的可以OpenOffice或者LiberOffice但是4.0版本的更新日志说底层集成OpenOffice替换为LibreOfficeOffice文件兼容性增强预览效果提升那肯定安装LiberOffice了。
a. LiberOffice下载地址LiberOffice官网注意版本选择自己适合的版本这个地址进去是7.3.1
因为下载可能比较慢给大家准备了百度网盘和阿里网盘的分享下载自取版本7.3.1:

链接https://pan.baidu.com/s/1N7rtuoYTWok7IUtSja7tng?pwd=0mx0 
提取码0mx0 

「LibreOffice_7.3.1_Linux_...m_langpack_zh-CN」等文件 
https://www.aliyundrive.com/s/njLZXccnxRD

上图有个中文语言包我看网上有人说需要最好还是装上避免部分中文不支持反正我没装知道的小伙伴麻烦给我留言我估计应该是预览的时候对中文支持比较好但是我没安装好像没啥问题 。下载有点慢多等一会或者下个迅雷下载比较快。

以下安装参考博客centos 安装 LibreOffice
b. LiberOffice上传服务器此步略过我还是放在/opt目录的。
c. 安装LiberOffice上传不代表可以用了还需要安装
命令yum install /opt/LibreOffice_7.3.1.3_Linux_x86-64_rpm/RPMS/*.rpm
d. 配置office插件地址。此处需要介绍到kkFileView的配置文件基本配置参考官方文档配置说明

大概28行左右 office.home = /opt/libreoffice7.3注意这个路径是安装后的路径不是源文件。

e. 再次启动cd /opt/kkFileView-4.0.0/bin 执行命令 ./startup.sh这次就成功了。

至此kkFileView基本启动完成如果有失败的小伙伴请./showlog.sh查看日志但这只是一个开始。

3.4 使用

官网使用指南
根据自己的情况选择使用方式即可。

4、常见问题

官网常见问题常见问题

4.1 预览文件乱码

这个问题官网的常见问题就有但是并不能解决问题但是提供了一个思路这个就是字体的问题。我去网上下了很多字体都不行后来在gitee的评论里看到一个兄弟的解决方案把windows电脑的字体全部上传。操作步骤如下
① 控制面板 --> 外观和个性化 --> 字体 选择所有字体放在一个文件夹
② 上传字体文件夹到/usr/share/fonts目录下然后依次执行mkfontscale 、mkfontdir 、fc-cache使字体生效
然后访问基本实现正常预览。

这个问题主要在预览PDF的时候出现默认使用图片预览的方式问题还比较少。

我现在文件基本可以预览就出现了增值税发票预览出错暂时没有解决办法之后有法子就来补充或者有小伙伴知道的留言一下。 解决办法建下面第5节自立更生手动编译

4.2 水印问题

在application.properties配置文件可以配置固定的水印官网也有动态水印的解决办法但是一定要注意水印是在页面上不是文件上利用浏览器打印可以打印出水印。但是切换到pdf利用pdf.js打印是没有水印的。

4.3 缓存问题

在application.properties配置文件可以配置缓存清除时机但是缓存有一点问题就是同名文件可能缓存更新不过来不如你有个文件a.txt但是你修改了这文件极有可能显示的还是原来的文件。我的解决办法
① Redis缓存在application.properties配置文件里设置Redis缓存减轻本地缓存的压力
② 预览文件的时候文件名称加上系统内文件的ID这样重名文件但是ID不一样就不会出现缓存问题。

4.4 后端配置文件预览地址

附一个官网下载流预览文件的方式

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

这有一个问题就是所有的IP和地址都在前端写的虽然没有什么问题但是如果你想做成可配置化的IP那地址最好在后端来补全前端做一下跳转就行这个预览地址基本就是采用base64 + 特殊字符转义的方式但是水印是将需要转换的内容ASCII码形式之外的内容用十六进制表示法转换出来以下代码借用Hutool的工具

/**
  * 加密文件路径
  *
  * @param text 路径或文本
  * @return 返回
  */
 private String encodeUrl(String text) {
     StringBuilder builder = new StringBuilder();
     // 这个地方是配置的特殊字符转义
     String specialChar = configService.selectConfigByKey(ConfigConstant.FILE_SPECIAL_CHAR);
     if (StrUtil.isBlank(specialChar)) {
         specialChar = "+/";
     }
     byte[] specialCharArr = StrUtil.bytes(specialChar);
     String encode = Base64.encode(text);
     byte[] bytes = StrUtil.bytes(encode);
     if (ArrayUtil.isNotEmpty(bytes)) {
         for (byte aByte : bytes) {
             if (ArrayUtil.contains(specialCharArr, aByte)) {
                 builder.append("%");
                 HexUtil.appendHex(builder, aByte, false);
             } else {
                 builder.append(new java.lang.String(new byte[]{aByte}));
             }
         }
     }
     return builder.toString();
 }
 
 /** 水印加密 */
 URLUtil.encode(StrUtil.emptyIfNull(watermark))

5、自立更生手动编译

不得不说kkFileView真的是一个非常不错的项目因为他是SpringBoot开发的现在不满足需求了那就源码拉下来自己开发呗。官网编译方法编译方法
编译jar包自取以后每次修改都在这里
2022/04/05

链接https://pan.baidu.com/s/13WHLy9H4cflCqQhqpbCHRQ?pwd=7jdz 
提取码7jdz 

「myFileView」https://www.aliyundrive.com/s/rrzJiNwcrX6

2022/04/05 拉下最新代码未发布的4.1版本此版本采用了最新的pdf.js界面好看了很多还可配置顶部工具栏修改点无解决问题增值税发票PDF预览问题