kkFileView在线文件预览项目学习&搭建

不愿意做鱼的小鲸鱼

发布于 2022-09-26 18:45:28

7.9K0

文章被收录于专栏：web全栈web全栈

在偶然的翻阅大佬博客的时候，发现一个挺有意思的项目：kkFileView，在线文件预览项目

1. kkFileView介绍

kkFileView是git的开源在线文件预览项目支持格式：doc、docx、ppt、pptx、xls、xlsx、zip、rar、mp4、mp3以及众多类文本如txt、html、xml、java、properties、sql、js、md、json、conf、ini、vue、php、py、bat、gitignore 该项目使用流行的spring boot搭建，易上手和部署，可以进行二次开发和独立部署，是一个很方便易使用的文件预览项目。

2. 源码下载

gitee下载地址：https://gitee.com/kekingcn/file-online-preview

3. 项目启动和配置修改

项目源码下载完之后，导入到IDEA，并安装pom.xml的相关依赖。
可以自定义项目的首页，或者关闭默认的首页演示。
可以进入application.properties文件根据自己的需求修改配置，如端口、文件大小限制、添加水印、文件预览等相关配置
也可以根据自己的需求修改源码，对项目进行二次开发，比如加个授权什么的等等...
IDEA直接运行启动文件即可以启动。

4. 项目打包和部署

4.1、打包

该项目是springboot项目，直接使用maven打包即可

cd file-online-preview
mvn clean package -DskipTests

或者使用IDEA的maven工具（注意打包的父模块）

项目打包后会生成四个文件：

kkFileView-4.1.0-SNAPSHOT.jar（Spring Boot打包后得到jar包）
kkFileView-4.1.0-SNAPSHOT.jar.original（是Maven在Spring Boot重新打包之前创建的原始jar文件）
kkFileView-4.1.0-SNAPSHOT.tar.gz（Linux版本：项目中通过assembly配置，生成的发行项目包，带配置好的启动脚本startup.sh等）
kkFileView-4.1.0-SNAPSHOT.zip（Window版本：项目中通过assembly配置，生成的发行项目包，带配置好的启动脚本startup.bat等）

注意：在配置文件中startup.sh或startup.bat的文件名，可能与IDEA打包生成的文件名不一致，需要自己修改。

4.2、部署

正确打包好了的话，部署的相对比较简单。

首先将打包好的源码上传到服务器(Linux)
终端解压后进入bin目录，直接执行：./startup.sh 脚本就运行了
执行：./startup.sh可以查询项目运行的日志

然后进行反向代理：

示例配置文件如下

location /
{
    proxy_pass http://127.0.0.1:8080;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;

    add_header X-Cache $upstream_cache_status;

    #Set Nginx Cache

        add_header Cache-Control no-cache;
}

到此为止，kkFileView项目就已经部署成功了： 我的部署演示：http://fileview.qkongtao.cn/

文件预览：

默认的office文件预览是转成图片模式预览，点击右边的PDF图标，可以转成PDF进行预览（可以文字复制和下载等，也有很多小工具）

4.3、文件预览乱码问题

大部分Linux系统上并没有预装中文字体或字体不全，需要把常用字体拷贝到Linux服务器上，具体操作如下：下载如下字体包 http://kkfileview.keking.cn/fonts.zip 文件解压完整拷贝到Linux下的 /usr/share/fonts目录。然后依次执行mkfontscale 、mkfontdir 、fc-cache使字体生效。具体可参考官方文档：https://kkfileview.keking.cn/zh-cn/docs/faq.html

5. web中使用API

在前端页面中使用该文件预览API很简单，示例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="http://qkongtao.cn/file/lib/base64.js"></script>
</head>
<body>
    <button onclick="preview()">点击预览</button>
    <script>
        function preview() {
            var url = 'https://api.idocv.com/data/doc/manual.docx'; //要预览文件的访问地址
            window.open('http://fileview.qkongtao.cn/onlinePreview?url=' + encodeURIComponent(Base64.encode(url)));
        }
    </script>
</body>
</html>

也可以参考官方文档的其他应用：https://kkfileview.keking.cn/zh-cn/docs/usage.html

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

打包