一、简介

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.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. 增加按钮，实现调用

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

下载

// 以下新增一个预览按钮
预览

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

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

整合 kkfile 实现文件预览

1. 文本预览#

3. word文档预览 #

4. ppt文档预览 #

5. 多媒体文件预览 #