kkfileview在线预览文件实现 Windows Linux

1 kkfileview介绍

网页端不想下载文件,而是想在线打开文件预览,比如:txt、doc、docx、pdf、xml、xls、xlsx、ppt、pptx、zip、png、jpg等等。这个时候 kkFileView 的出现就解决了我们的问题。
kkFileView 为文件文档在线预览解决方案,该项目使用流行的spring boot搭建,易上手和部署,基本支持主流办公文档的在线预览,如doc,docx,xls,xlsx,ppt,pptx,pdf,txt,zip,rar,图片,视频,音频等等。
kkfileview 官网
kkfileview 码云地址
kkfileview gitHub地址

2 kkfileview安装

首先,下载代码到本地
kkfileview 码云
idea开发工具打开,clean,install
在这里插入图片描述

2.1 Windows环境

2.1.1 启动

install执行成功后,找到target文件夹下的kkFileView-x.x.x.zip压缩包,进行解压缩。进入 bin 目录,双击 startup.bat 启动 kkFileView。
在这里插入图片描述

2.1.2 访问检查

进入 log 目录查看 kkFileView.log 日志,打印【kkFileView 服务启动完成,耗时:26.8350973s,演示页请访问: http://127.0.0.1:8012 】则说明启动成功。
这时可以访问http://localhost:8012/index,看到以下页面说明部署成功。
kkfileview 首页

2.1.3 Windows另一种部署方式

截止2.1.2步骤Windows环境已经部署完成。如果是部署本地测试环境的话,还可以直接如下图运行服务,效果和上一种方法是相同的。

在这里插入图片描述

2.2 Linux环境

如果搭建测试环境,可以用VMware创建一个虚拟机

2.2.1 上传压缩包

root用户下将 kkFileView-4.2.1.tar.gz 上传到服务器 ,使用命令 tar -zxvf kkFileView-4.2.1.tar.gz 解压。
在这里插入图片描述

2.2.2 开放 8012 端口

1.查看防火墙状态:systemctl status firewalldfirewall-cmd --state

2.若防火墙未开启,则需要开启防火墙:systemctl start firewalld.service

3.查看开放端口列表firewall-cmd --list-ports

4.开启指定端口:firewall-cmd --zone=public --add-port=8012/tcp --permanent(8012为端口号),提示success则为成功

5.重新加载防火墙firewall-cmd --reload,提示success则为成功

6.再次查看开放端口列表firewall-cmd --list-ports,8012端口已经成功开放
在这里插入图片描述

2.2.3 安装字体

2.2.3.1 字体压缩包下载:

1 网页下载:
http://kkfileview.keking.cn/fonts.zip
2 百度网盘下载:
链接:https://pan.baidu.com/s/1-Sp02zdMfZfNuNJIEmOmyA
提取码:asgo

2.2.3.2 字体安装

1 将下载的字体fonts.zip上传到 /usr/share/fonts 目录
2 执行unzip fonts.zip命令解压,若提示unzip: command not found则运行yum install -y unzip zip安装命令。安装成功后就可以使用unzip命令了。
3 执行命令 mkfontscalemkfontscale 提示没有命令则先 yum install mkfontscale 安装命令,再分别依次执行 mkfontscale、mkfontdir、fc-cache 命令。

2.2.4 启动服务

root用户下解压后进入 kkFileView-4.2.1/bin 目录,执行 ./startup.sh 开始安装和启动,安装过程中会下载需要的组件需要输入y
这里下载速度特别慢,而且到最后也大概率会下载失败在这里插入图片描述

在这里插入图片描述
可以直接退出下载
在这个网站找到对应libreoffice版本,下载好安装包后上传到Linux服务器手动安装。
libreoffice 安装包下载

我百度网盘这里有下载好的
链接:https://pan.baidu.com/s/1rsPEp70_LSNapzFosTaObQ
提取码:y7f2

root用户下将 LibreOffice_7.3.7.2_Linux_x86-64_rpm.tar.gz 上传到服务器 ,使用命令 tar -zxvf LibreOffice_7.3.7.2_Linux_x86-64_rpm.tar.gz 解压。
进入RPMS目录执行 yum localinstall *.rpm 进行安装。会有提示信息输入y
在这里插入图片描述
提示安装成功后,进入kkFileView-4.2.1/bin目录,执行./startup.sh命令启动kkFileView服务,提示正在运行,由于前面启动不正确,我先执行./shutdown.sh命令关闭进程,关闭成功后,再执行./startup.sh启动服务,之后执行./showlog.sh命令查看日志,可以看到已经启动成功。
在这里插入图片描述

2.2.5 检查运行是否正常

ifconfig命令查看服务器IP地址
在这里插入图片描述
之后本地浏览器访问http://IP:8012/index,看到一下界面说明运行成功。
在这里插入图片描述

3 前端页面调用接口

首先安装依赖

npm install --save js-base64
或
yarn add js-base64

引入依赖

import { Base64 } from "js-base64";

previewFile方法传入文件地址就可以

<el-button type="primary" size="mini" @click="previewFile(file)">预览</el-button>

previewFile(file) {
	 window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(file.url)));
	 // window.open('http://IP:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(file.url)));
}

4. 参考

kkFileView安装及使用——文件预览解决方案