SpringBoot

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

Nick · 12月20日 · 2021年 · 本文2626字 · 阅读7分钟1,761

在偶然的翻阅大佬博客的时候,发现一个挺有意思的项目: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
官方演示:https://file.keking.cn/index
官方文档:https://kkfileview.keking.cn/zh-cn/docs/home.html
该项目使用流行的spring boot搭建,易上手和部署,可以进行二次开发和独立部署,是一个很方便易使用的文件预览项目。

2. 源码下载

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

3. 项目启动和配置修改

  • 项目源码下载完之后,导入到IDEA,并安装pom.xml的相关依赖。
  • 可以自定义项目的首页,或者关闭默认的首页演示。
  • 可以进入application.properties文件根据自己的需求修改配置,如端口、文件大小限制、添加水印、文件预览等相关配置,具体可以查看官方文档:https://kkfileview.keking.cn/zh-cn/docs/config.html
  • 也可以根据自己的需求修改源码,对项目进行二次开发,比如加个授权什么的等等...
  • IDEA直接运行启动文件即可以启动。
    kkFileView在线文件预览项目学习&搭建-左眼会陪右眼哭の博客

4. 项目打包和部署

4.1、打包

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

cd file-online-preview
mvn clean package -DskipTests

或者使用IDEA的maven工具(注意打包的父模块)
kkFileView在线文件预览项目学习&搭建-左眼会陪右眼哭の博客

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

  • 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等)
    kkFileView在线文件预览项目学习&搭建-左眼会陪右眼哭の博客

注意:在配置文件中startup.sh或startup.bat的文件名,可能与IDEA打包生成的文件名不一致,需要自己修改。
kkFileView在线文件预览项目学习&搭建-左眼会陪右眼哭の博客

4.2、部署

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

  • 首先将打包好的源码上传到服务器(Linux)
  • 终端解压后进入bin目录,直接执行:./startup.sh 脚本就运行了
  • 执行:./startup.sh可以查询项目运行的日志
    kkFileView在线文件预览项目学习&搭建-左眼会陪右眼哭の博客

然后进行反向代理:

示例配置文件如下

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/
kkFileView在线文件预览项目学习&搭建-左眼会陪右眼哭の博客
文件预览:
kkFileView在线文件预览项目学习&搭建-左眼会陪右眼哭の博客
默认的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

4 条回应
  1. songshuxiao2021-12-27 · 21:18

    请问博主的代码高亮怎么弄?

    • Nick2021-12-28 · 9:03

      代码高亮应该是这个主题自带的吧,你的站点主题买的官方吗

      • songshuxiao2021-12-28 · 22:02

        我购买的是同作者开发的neumorphism主题,两个主题有轻微的区别,我已经通过改css和是使用插件弄好啦!

        • Nick2021-12-28 · 22:11

          可以,我的不是买的主题,找了破解版,自己改bug搞得,正版太多限制,也花钱

在线人数:1人 来访统计
隐藏