一、简介

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

二、特性

jsp批量转json整合 kkfile 实现文件预览 SQL

支持word excel ppt，pdf等办公函档；支持txt,java,php,py,md,js,css等所有纯文本；支持zip,rar,jar,tar,gzip等压缩包；支持jpg，jpeg，png，gif等图片预览（翻转，缩放，镜像）；支持mp3，mp4，flv等多媒体文件预览；利用spring boot开拓，预览做事搭建支配非常简便；rest接供词给做事，跨平台特性(java,php,python,go,php，....)都支持，运用接入大略方便；支持普通http/https文件下载url、http/https文件下载流url、ftp下载url等多种预览源；供应zip，tar.gz发行包，供应一键启动脚本和丰富的配置项，方便支配利用；供应Docker镜像发行包，方便在容器环境支配；抽象预览做事接口，方便二次开拓，非常方便添加其他类型文件预览支持；最主要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.tardocker 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)转义：

符号

url中转义结果

转义码

+

URL 中+号表示空格

%2B

空格

URL中的空格可以用+号或者编码

%20

/

分隔目录和子目录

%2F

？

分隔实际的URL和参数

%3F

%

指定分外字符

%25

#

表示书签

%23

&

URL 中指定的参数间的分隔符

%26

=

URL 中指定参数的值

%3D

五、预览展示

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如有没有未覆盖全面，可通过配置文件指定多媒体类型视频预览效果如下