整合 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.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