0. 引言
我们在项目中常常需要实现文档在线预览的功能，而文档种类繁多，除了pdf，还有word、text、excel、甚至还有mp3,mp4等多媒体文件。常用的手段是通过OpenOffice来将文档转换为pdf实现预览，本期我们就来看如何通过kkFileView实现文档的在线预览功能
1. kkFileView概述
kkFileView本身基于openOffice实现，是一款国产的开源文档在线预览组件。支持的预览文件格式如下：
支持word excel ppt，pdf等办公文档 支持txt,java,php,py,md,js,css等所有纯文本 支持zip,rar,jar,tar,gzip等压缩包 支持jpg，jpeg，png，gif等图片预览（翻转，缩放，镜像） 支持mp3，mp4，flv等多媒体文件预览
本身通过rest接口提供预览服务，即组件部署后，通过将文档url作为入参，以rest接口形式来预览文档。后续我们详细演示
更多介绍可阅读官方文档
2. 搭建
2.1 通过安装包安装
1、因为基于openOffice运行，所以需要提前安装openOffice或者LibreOffice（如果通过docker形式安装kkFileView则不用再单独安装OpenOffice）
window内置openOffice，centos或ubuntu下会自动下载，macOS中需要手动安装
OpenOffice安装包下载
选择对应的系统版本下载即可，langpack是语言包
下载完成后双击安装，打开如图所示
当然也可以通过homebrew安装
brew cask install openoffice
2、拉取源码，因为发行版需要付费，我们采取自己编译
4.1.0版本源码
3、IDEA中引入项目，运行启动类验证下代码完整性，成功启动说明代码没问题
4、打包项目，在target目录下会找到打包出来的安装包
5、将生成的安装包解压
tar -zxvf kkFileView-4.1.0.tar.gz
6、该项目是通过assembly插件打包的，所以打包出现的项目下会有一个bin目录，通过startup.sh脚本启动
./bin/startup.sh
2.2 通过docker安装
1、拉取镜像
wget http://kkfileview.keking.cn/kkFileView-4.1.0-docker.tar
docker load -i kkFileView-4.1.0-docker.tar
# 如果网络环境可以，可直接通过pull指令拉取镜像
docker pull keking/kkfileview:4.1.0
2、安装docker容器
docker run -it -p 8012:8012 keking/kkfileview:4.1.0
3、访问http://127.0.0.1:8012
3. 使用
1、创建一个springboot项目，在static下创建文件夹file，存放各种格式的测试文件进去
2、创建测试页面，代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件预览</title>
<script src="js/jQuery3.6.1.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-base64@3.6.0/base64.min.js"></script>
</head>
<body>
<div >
<a onclick="openWord(1)">预览word</a><br>
<a onclick="openWord(2)">预览excel</a><br>
<a onclick="openWord(3)">预览txt</a><br>
<a onclick="openWord(4)">预览pdf</a><br>
<a onclick="openWord(5)">预览png</a><br>
<a onclick="openWord(6)">预览md</a><br>
</div>
</body>
<script>
// 文件上传
function openWord(type) {
var name = "";
switch (type){
case 1: name="file.docx";break;
case 2: name="file.xlsx";break;
case 3: name="file.txt";break;
case 4: name="file.pdf";break;
case 5: name="file.png";break;
case 6: name="file.md";break;
}
var url = 'http://192.168.10.101:8080/file/'+name; //要预览文件的访问地址
// 192.168.10.101 本机Ip
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url)));
}
</script>
</html>
3、运行项目
4、点击各类文件预览，显示正常
word:
excel:
txt:
pdf:
png:
md:
项目源码
本文演示源码可在如下地址下载：
文档在线预览演示源码
总结
综上，我们的文档在线预览功能就完成了，更多功能大家可以亲自动手，实际体验体验！
本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。 本网站还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。 除此之外，本网站还拥有一个活跃的社区，您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信，社区的力量可以帮助您更好地成长和进步。 在本网站中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能!