springboot：用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等多媒体文件预览本身通过re

wu@55555

4134人浏览 · 2023-01-04 23:19:14

wu@55555 · 2023-01-04 23:19:14 发布

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中需要手动安装

在centos或ubuntu中安装时如果报错downloadarchive.documentfoundation.org地址证书过期，可以将安装脚本install.sh中wget里设置跳过校验wget --no-check-certificate ...

mac下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>