kkfileview在线预览文件实现 Windows Linux

朱雀 2024-03-22 18:51 90阅读 0赞

## 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 码云地址][kkfileview 1]  
[kkfileview gitHub地址][kkfileview gitHub]

## 2 kkfileview安装 ##

首先，下载代码到本地  
![kkfileview 码云][kkfileview 2]  
idea开发工具打开，clean，install  
![在这里插入图片描述][8a6784e60cd742d69b0bdaa42c22ca63.png]

### 2.1 Windows环境 ###

#### 2.1.1 启动 ####

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

#### 2.1.2 访问检查 ####

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

#### 2.1.3 Windows另一种部署方式 ####

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

![在这里插入图片描述][df6da5b4a79e4833b73a33a4551df79c.png]

### 2.2 Linux环境 ###

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

#### 2.2.1 上传压缩包 ####

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

#### 2.2.2 开放 8012 端口 ####

1.查看防火墙状态：`systemctl status firewalld` 或 `firewall-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端口已经成功开放  
![在这里插入图片描述][75906d8dfe044bb6967eb6bb42dbd2bf.png]

#### 2.2.3 安装字体 ####

##### 2.2.3.1 字体压缩包下载： #####

1 网页下载：  
[http://kkfileview.keking.cn/fonts.zip][http_kkfileview.keking.cn_fonts.zip]  
2 百度网盘下载：  
链接：[https://pan.baidu.com/s/1-Sp02zdMfZfNuNJIEmOmyA][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 执行命令 `mkfontscale` 若 `mkfontscale` 提示没有命令则先 `yum install mkfontscale` 安装命令，再分别依次执行 mkfontscale、mkfontdir、fc-cache 命令。

#### 2.2.4 启动服务 ####

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

![在这里插入图片描述][87913dbc8bec4bf18114780481b1280e.png]  
可以直接退出下载  
在这个网站找到对应libreoffice版本，下载好安装包后上传到Linux服务器手动安装。  
[libreoffice 安装包下载][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  
![在这里插入图片描述][c2854d2ac9af4507b7b266be5446e8c5.png]  
提示安装成功后，进入`kkFileView-4.2.1/bin`目录，执行`./startup.sh`命令启动kkFileView服务，提示正在运行，由于前面启动不正确，我先执行`./shutdown.sh`命令关闭进程，关闭成功后，再执行`./startup.sh`启动服务，之后执行`./showlog.sh`命令查看日志，可以看到已经启动成功。  
![在这里插入图片描述][2e786755dcf04777b8533132d3f3a8c2.png]

#### 2.2.5 检查运行是否正常 ####

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

## 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安装及使用——文件预览解决方案][kkFileView]

[kkfileview]: https://kkfileview.keking.cn/zh-cn/index.html
[kkfileview 1]: https://gitee.com/kekingcn/file-online-preview
[kkfileview gitHub]: https://github.com/kekingcn/kkFileView
[kkfileview 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/73e9794a50f84a4c863f794589f3cd29.png
[8a6784e60cd742d69b0bdaa42c22ca63.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/c6d34031a8f4497a863dc824335dcb41.png
[246244dad0eb4580bee6fe98c6f3f287.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/8878b9b7cf6a433e86bf4b49cb481308.png
[kkfileview 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/fe9247d75cec4ba38de62af95766a9bb.png
[df6da5b4a79e4833b73a33a4551df79c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/b9d3ea821741433a8b4cffdc33c8030c.png
[VMware]: https://blog.csdn.net/qq_44125965/article/details/126577760?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0-126577760-blog-126296291.235%5Ev36%5Epc_relevant_default_base3&spm=1001.2101.3001.4242.1&utm_relevant_index=3
[b980eacb106440d78c70011229f93be0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/3375843e0ea54e4da2d0f52ca4f8c626.png
[75906d8dfe044bb6967eb6bb42dbd2bf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/d5f7091f14dc49a29bdbb4a6b2144b13.png
[http_kkfileview.keking.cn_fonts.zip]: http://kkfileview.keking.cn/fonts.zip
[https_pan.baidu.com_s_1-Sp02zdMfZfNuNJIEmOmyA]: https://pan.baidu.com/s/1-Sp02zdMfZfNuNJIEmOmyA
[76e7de2e5f844f02a51ccd1bd65ff633.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/053fee190daf4c6c972928dd1e7e4c54.png
[87913dbc8bec4bf18114780481b1280e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/31bb451e70394d39bad319f3508d66e1.png
[libreoffice]: https://downloadarchive.documentfoundation.org/libreoffice/old/7.1.4.2/rpm/x86_64/
[c2854d2ac9af4507b7b266be5446e8c5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/50ec300e2932443889dd190f26dab18f.png
[2e786755dcf04777b8533132d3f3a8c2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/ebb6f7e5db454a98a4b15a61183a35f1.png
[ae9e0e376ff14eb8ba7b9479d5aff59e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/3cb338b42d634758b7f6d2b80f697431.png
[0948f779f6f949d3978f0c59f35a0f20.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/2b5acd9138194dafa48cdea7c2710b54.png
[kkFileView]: https://blog.csdn.net/qq_33697094/article/details/126076565