一、简介

kkFileView为文件文档在线预览解决方案，该项目使用流行的spring boot搭建，易上手和部署，基本支持主流办公文档的在线预览，如doc,docx,xls,xlsx,ppt,pptx,pdf,txt,zip,rar,图片,视频,音频等等。

二、特性

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

三、部署

1. 环境要求

• Java: 1.8+
• LibreOffice或OpenOffice(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中央仓库
docker pull keking/kkfileview:4.1.0


# 网络环境不方便访问docker中央仓库
wget http://kkfileview.keking.cn/kkFileView-4.1.0-docker.tar
docker load -i kkFileView-4.1.0-docker.tar

3. 运行

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

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

四、使用

1. vue cli 指向 kkfile 服务

2. 安装 base64 编码解码

npm install --save js-base64

3. 增加按钮，实现调用

在下载按钮下方新增一个预览按钮

<el-button
    type="text"
    size="small"
    icon="el-icon-download"
    @click="download(scope.row, scope.index)"
>下载
</el-button>
// 以下新增一个预览按钮
<el-button
    type="text"
    size="small"
    icon="el-icon-upload"
    @click="view(scope.row, scope.index)"
>预览
</el-button>

实现调用 view 方法

const fileURL = (row: any): string => {
  return ``;
};


const preview = (row:any) => {
  const protocol = window.location.protocol;
  const host = window.location.host;
  const file_url = `${protocol}//${host}/api/admin/sys-file/${row.bucketName}/${row.fileName}?TENANT-ID=${Session.getTenant()}&access_token=${Session.getToken()}`;
  const view_url = 'http://localhost:8012/onlinePreview?url=' + encodeURIComponent(window.btoa(file_url));
  window.open(view_url, '_blank');
};

当您的项目内需要预览文件时，只需要调用浏览器打开本项目的预览接口，并传入须要预览文件的url。

注意，如果要预览的url里包含需要转义的特殊字符，如下表格，请使用encodeURIComponent(url)转义：

五、预览展示

1. 文本预览#

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

2. 图片预览 #

支持jpg，jpeg，png，gif等图片预览（翻转，缩放，镜像），预览效果如下

3. word文档预览 #

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

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

4. ppt文档预览 #

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

5. 多媒体文件预览 #

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