kkFileView

superC file

# 一、kkFileView基础

# 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流程图类。

具体格式如下：

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

# 1.4 使用技术

spring boot
freemarker
redisson
jodconverter

# 1.5 依赖外部环境

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

# 二、kkFileView搭建

# 2.1 Docker部署

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

浏览器访问容器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）都是部署在公司内网，现需要将该项目接通互联网，但只能开通前端端口25280进行访问项目。

实现方案：

1、在kkFileView配置代理转发。

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: "http://113.113.192.66:25280/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

说明：

http://113.113.192.66:25280为前端Vue项目外网访问地址，外网访问IP:外网映射端口，映射前端Vue项目内网地址为10.10.33.222:80（该映射是在外网穿透系统进行配置）；；
/preview为自定义转发前缀，与前端项目的Nginx配置保持一致；
docker容器映射端口为8099；

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

http {
    server {
        listen       80;
	    proxy_set_header  X-Real-IP  $remote_addr;
        server_name  10.10.33.222;
        
		location /preview/ {
			proxy_pass http://10.10.33.222:8099/;	#指向文件预览服务地址
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
            if ($request_method = 'OPTIONS') {
                add_header Access-Control-Allow-Origin *;
                add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
                add_header Access-Control-Allow-Headers 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
                add_header Access-Control-Max-Age 1728000;
                add_header Content-Type 'text/plain charset=UTF-8';
                add_header Content-Length 0;
                return 204;
            }
		}
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

说明：

内网IP为10.10.33.222，内网前端Vue服务的端口为80；
/preview为自定义转发前缀；
http://10.10.33.222:8099为内网访问文件预览服务地址；

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

#文件预览
VUE_APP_FILE_REVIEW_URL = 'http://113.113.192.66:25280/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

Flowable MinIO

超炫之家

kkFileView

kkFileView

# 一、kkFileView基础

# 1.1 kkFileView简介

# 1.2 特性

# 1.3 支持的格式

# 1.4 使用技术

# 1.5 依赖外部环境

# 二、kkFileView搭建

# 2.1 Docker部署

# 三、kkFileView使用

# 3.1 前端使用

# 3.2 内网穿透