超炫之家

kkFileView

file

# 一、kkFileView基础

kkFileView官网 (opens new window)

kkFileView代码官网-Github (opens new window)

kkFileView代码官网-Gitee (opens new window)

kkFileView在线演示地址 (opens new window)

kkFileView详细使用文档 (opens new window)

# 1.1 kkFileView简介

kkFileView为文件文档在线预览解决方案，该项目使用流行的spring boot搭建，易上手和部署，基本支持主流办公文档的在线预览，如doc,docx,xls,xlsx,ppt,pptx,pdf,txt,zip,rar,图片,视频,音频等。

kkfileView 是基于http协议进行交互的。外部系统将需要预览的文件url 发送给kkfileView，kkfileView 返回预览的文件。这样做的好处很明显，不需要改造原有系统，降低开发成本，而且是语言无关性的，不同语言的项目也可以使用。

# 1.2 特性

  • 使用 spring-boot 开发，预览服务搭建部署非常简便；
  • rest 接口提供服务，跨语言、跨平台特性(java,php,python,go,php，....)都支持，应用接入简单方便；
  • 抽象预览服务接口，方便二次开发，非常方便添加其他类型文件预览支持；
  • 最最重要 Apache 协议开源。

# 1.3 支持的格式

支持文本类（txt,html,json,properties,md,log,java）、图片类（jpg，jpeg，png，gif）、word文档类（doc，docx）、ppt文档类（ppt，pptx）、pdf文档类、Excel文档类（xls，xlsx）、压缩文件类、多媒体文件类（mp3,wav,mp4,flv）、CAD文档类、流程图bpmn文件类、D模型文件类、dcm医疗数位影像文件类、drawio流程图类。

具体格式如下：

  1. 支持 doc, docx, xls, xlsx, xlsm, ppt, pptx, csv, tsv, dotm, xlt, xltm, dot, dotx,xlam, xla ,pages 等 Office 办公文档
  2. 支持 wps, dps, et, ett, wpt 等国产 WPS Office 办公文档
  3. 支持 odt, ods, ots, odp, otp, six, ott, fodt, fods 等OpenOffice、LibreOffice 办公文档
  4. 支持 vsd, vsdx 等 Visio 流程图文件
  5. 支持 wmf, emf 等 Windows 系统图像文件
  6. 支持 psd ,eps 等 Photoshop 软件模型文件
  7. 支持 pdf ,ofd, rtf 等文档
  8. 支持 xmind 软件模型文件
  9. 支持 bpmn 工作流文件
  10. 支持 eml 邮件文件
  11. 支持 epub 图书文档
  12. 支持 obj, 3ds, stl, ply, gltf, glb, off, 3dm, fbx, dae, wrl, 3mf, ifc, brep, step, iges, fcstd, bim 等 3D 模型文件
  13. 支持 dwg, dxf, dwf, iges , igs, dwt, dng, ifc, dwfx, stl, cf2, plt 等 CAD 模型文件
  14. 支持 txt, xml(渲染), xbrl(渲染), md(渲染), java, php, py, js, css 等所有纯文本
  15. 支持 zip, rar, jar, tar, gzip, 7z 等压缩包
  16. 支持 jpg, jpeg, png, gif, bmp, ico, jfif, webp 等图片预览（翻转，缩放，镜像）
  17. 支持 tif, tiff 图信息模型文件
  18. 支持 tga 图像格式文件
  19. 支持 svg 矢量图像格式文件
  20. 支持 mp3,wav,mp4,flv 等音视频格式文件
  21. 支持 avi,mov,rm,webm,ts,rm,mkv,mpeg,ogg,mpg,rmvb,wmv,3gp,ts,swf 等视频格式转码预览
  22. 支持 dcm 等医疗数位影像预览
  23. 支持 drawio 绘图预览

# 1.4 使用技术

  • spring boot
  • freemarker
  • redisson
  • jodconverter

# 1.5 依赖外部环境

  • redis (可选，默认不用)
  • OpenOffice 或者 LibreOffice( Windows 下已内置，Linux 脚本启动模式会自动安装，Mac OS 下需要手动安装)

# 二、kkFileView搭建

# 2.1 Docker部署

# 4.1.0

docker-compose.yml

version: '3.3'
services:
  fileview:
    image: keking/kkfileview:latest
    container_name: fileview
    restart: always
    ports:
      - "8099:8012"
    environment:
      KK_FILE_DIR: "/data/file"  # 文件路径地址
      #KK_BASE_URL: "https://aa.bb.com/preview/"  # 配置nginx方向代理转发需要用到，详见官方文档
      #KK_CONTEXT_PATH: "/preview/"  # 配置nginx方向代理转发需要用到，详见官方文档
    volumes:
      - ./fileview_data:/data/file
    deploy:
      resources:
        limits:
          cpus: "1"
          memory: 2G
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 4.4.0

docker-compose.yml

version: '3.3'
services:
  fileview_4_4:
    image: wangbowen/kkfileview:4.4.0
    container_name: fileview_4_4
    restart: always
    ports:
      - "8099:8012"
    environment:
      KK_FILE_DIR: "/data/file"  # 文件路径地址
      #KK_BASE_URL: "https://aa.bb.com/preview/"  # 配置nginx方向代理转发需要用到，详见官方文档
      #KK_CONTEXT_PATH: "/preview/"  # 配置nginx方向代理转发需要用到，详见官方文档
    volumes:
      - fileview_data:/data/file
    deploy:
      resources:
        limits:
          cpus: "1"
          memory: 2G

volumes:
  fileview_data:
    driver: local
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

浏览器访问容器8012端口 http://127.0.0.1:8012 即可看到项目演示用首页。

# 三、kkFileView使用

# 3.1 前端使用

如果你的项目需要接入文件预览项目，达到对docx、excel、ppt、jpg等文件的预览效果，那么通过在你的项目中加入下面的代码就可以成功实现：

var url = 'http://127.0.0.1:8080/file/test.txt'; //要预览文件的访问地址
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(base64Encode(url)));
1
2

新增多图片同时预览功能，接口如下：

var fileUrl =url1+'|'+url2;//多url使用'|'字符隔开
window.open('http://127.0.0.1:8012/picturesPreview?urls='+encodeURIComponent(base64Encode(fileUrl)));
1
2

# 3.2 项目使用

项目（前端、kkFileView）均使用docker部署在同一IP下。

实现方案：

1、在kkFileView配置代理转发。

version: '3.3'
services:
  fileview_4_4:
    image: wangbowen/kkfileview:4.4.0
    container_name: fileview_4_4
    restart: always
    ports:
      - "8099:8012"
    environment:
      KK_FILE_DIR: "/data/file"
    volumes:
      - fileview_data:/data/file
    deploy:
      resources:
        limits:
          cpus: "1"
          memory: 2G

volumes:
  fileview_data:
    driver: local
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

说明：

  • docker容器映射端口为8099。
  • kkFileView服务地址为http://192.168.1.100:8099。

2、在前端Vue代码配置请求路径。

#文件预览
VUE_APP_FILE_REVIEW_URL = 'http://192.168.1.100:8099/preview/onlinePreview?url='
1
2
<template>
    <iframe width="100%" ref="myIframe" :src="kkurl + encodeURIComponent(fileUrl)" referrerpolicy="no-referrer"
     allow="payment" no-referrer height="100%" frameborder="0">
    </iframe>
</template>
<script>
  export default {
    data() {
      return {
        kkurl: process.env.VUE_APP_FILE_REVIEW_URL,
        fileUrl: "",
      };
    },
    mounted() {
      let Base64 = require("js-base64").Base64;
      this.fileUrl = Base64.encodeURI('http://oss.uri.com/bucket/category/fileName.pdf');
    }
  };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

说明：

  • 前端文件预览URL前缀为http://192.168.1.100:8099/preview/onlinePreview。

3、在前端Nginx中配置代理转发。

http {
    server {
        listen       80;
        server_name  192.168.1.100;

        location /preview/ {
            proxy_pass http://192.168.1.100:8099/;
        }
        location /onlinePreview/ {
            proxy_pass http://192.168.1.100:8099/onlinePreview;
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

说明：

  • /preview为自定义转发前缀，将URL进行截取转发，将http://192.168.1.100:80/preview/转发至http://192.168.1.100:8099/。

  • /onlinePreview为kkFileView自带访问前缀，转发kkFileView服务的CSS、img、js等静态文件。

MinIO