整合 kkfile 实现文件预览
一、简介
kkFileView为文件文档在线预览解决方案，该项目使用流行的spring boot搭建，易上手和部署，基本支持主流办公文档的在线预览，如doc,docx,xls,xlsx,ppt,pptx,pdf,txt,zip,rar,图片,视频,音频等等。
二、特性
- 支持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.tar
docker load -i kkFileView-4.1.0-docker.tar3. 运行
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
如有没有未覆盖全面，可通过配置文件指定多媒体类型
视频预览效果如下
