SpringBoot使用kkFileview实现文件在线预览

1.介绍:

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

2.特性:

在这里插入图片描述

3. 在线部署

3.1 环境要求 #

Java: 1.8+
OpenOffice或LiberOffice(Windows下已内置,CentOS或Ubuntu下会自动下载安装,MacOS下需要自行安装)

3.2 部署运行 #

1). 物理机或虚拟机上运行 #
从 码云发行版本 下载最新版发行包
解压kkFileView-x.x.x文件(Windows用.zip包,Linux/MacOS用.tar.gz包)
打开解压后文件夹的bin目录,运行startup脚本(Windows下以管理员身份运行startup.bat,Linux以root用户运行startup.sh)
浏览器访问本机8012端口 http://127.0.0.1:8012 即可看到项目演示用首页
2). Docker容器环境环境运行 #
拉取镜像
docker pull keking/kkfileview
运行
docker run -it -p 8012:8012 keking/kkfileview

3.3 docker-compose 示例:

>  kkfileview:
   container_name: kkfileview
   image: keking/kkfileview
   restart: always
   ports:
     - 8012:8012
   volumes:
     - ./logs/fileview.log:/logs/fileview.log:rw

4. nginx代理转发

说明:提供预览服务的地址,默认从接收请求url读,如果使用nginx等反向代理,需要手动设置为通过nginx访问预览服务的地址
默认值:未设置

4.1 示例:

base.url = https://file.keking.cn/preview
例如nginx的访问地址为 https://file.keking.cn 想要使用 https://file.keking.cn/preview/来做预览,kkFileView部署在内网192.168.1.233服务器上,需要在nginx中添加反向代理如下:

location /preview {
    proxy_pass 192.168.1.233:8012;
}

修改kkFileView的配置文件如下两项

server.context-path = /preview
base.url = https://file.keking.cn/preview

使用如下地址来访问预览页面

var url = ‘https://file.keking.cn/file/test.txt’; //要预览文件的访问地址
window.open(‘https://file.keking.cn/preview/onlinePreview?url=’+encodeURIComponent(url));

4.2 转码小工具

Base64转码,戳
encodeURIComponent转码,戳

5. 使用案例

5.1 场景:

部署项目中,需要有已上传文件的在线预览功能

5.2 配置步骤:(以docker搭建为例)

以docker搭建为例:

  1. 修改docker-compose.yml 配置文件,内容如下:
kkfileview:
   container_name: kkfileview
   image: keking/kkfileview
   restart: always
   ports:
     - 8012:8012
   volumes:
     - ./logs/fileview.log:/logs/fileview.log:rw
   environment:
     - KK_CONTEXT_PATH=/preview     --请求前缀,方便nginx 转发处理
     - KK_BASE_URL=http://域名/preview
     - TZ=Asia/Shanghai
  1. 修改nginx配置文件
location /preview {
    proxy_pass http://kkfileview:8012;  
}

说明:

官文:针对docker运行的用户,所有配置项可以使用设置相应的环境变量来配置
环境变量的KEY为配置文件中每个配置项后${}中的KEY
|

那么${}中的KEY 哪里查看,移步https://gitee.com/kekingcn/file-online-preview/releases,自行下载解压,压缩包中的config->application.properties 文件,内容如下:

#######################################不可动态配置,需要重启生效#######################################
server.port = ${KK_SERVER_PORT:8012}
server.servlet.context-path= ${KK_CONTEXT_PATH:/}
server.servlet.encoding.charset = utf-8
#文件上传限制
spring.servlet.multipart.max-file-size=500MB
spring.servlet.multipart.max-request-size=500MB
## Freemarker 配置
spring.freemarker.template-loader-path = classpath:/web/
spring.freemarker.cache = false
spring.freemarker.charset = UTF-8
spring.freemarker.check-template-location = true
spring.freemarker.content-type = text/html
spring.freemarker.expose-request-attributes = true
spring.freemarker.expose-session-attributes = true
spring.freemarker.request-context-attribute = request
spring.freemarker.suffix = .ftl

# office-plugin
## office转换服务的进程数,默认开启两个进程
office.plugin.server.ports = 2001,2002
## office 转换服务 task 超时时间,默认五分钟
office.plugin.task.timeout = 5m

#文件资源路径(默认为打包根路径下的file目录下)
#file.dir = D:\\kkFileview\\
file.dir = ${KK_FILE_DIR:default}
#openoffice home路径
#office.home = C:\\Program Files (x86)\\OpenOffice 4
office.home = ${KK_OFFICE_HOME:default}

#缓存实现类型,不配默认为内嵌RocksDB(type = default)实现,可配置为redis(type = redis)实现(需要配置spring.redisson.address等参数)和 JDK 内置对象实现(type = jdk),
cache.type =  ${KK_CACHE_TYPE:jdk}
#redis连接,只有当cache.type = redis时才有用
spring.redisson.address = ${KK_SPRING_REDISSON_ADDRESS:127.0.0.1:6379}
spring.redisson.password = ${KK_SPRING_REDISSON_PASSWORD:}
#缓存是否自动清理 true 为开启,注释掉或其他值都为关闭
cache.clean.enabled = ${KK_CACHE_CLEAN_ENABLED:true}
#缓存自动清理时间,cache.clean.enabled = true时才有用,cron表达式,基于Quartz cron
cache.clean.cron = ${KK_CACHE_CLEAN_CRON:0 0 3 * * ?}

#######################################可在运行时动态配置#######################################
#提供预览服务的地址,默认从请求url读,如果使用nginx等反向代理,需要手动设置
#base.url = https://file.keking.cn
base.url = ${KK_BASE_URL:default}

#信任站点,多个用','隔开,设置了之后,会限制只能预览来自信任站点列表的文件,默认不限制
#trust.host = file.keking.cn,kkfileview.keking.cn
trust.host = ${KK_TRUST_HOST:default}

#是否启用缓存
cache.enabled = ${KK_CACHE_ENABLED:true}

#文本类型,默认如下,可自定义添加
simText = ${KK_SIMTEXT:txt,html,htm,asp,jsp,xml,json,properties,md,gitignore,log,java,py,c,cpp,sql,sh,bat,m,bas,prg,cmd}
#多媒体类型,默认如下,可自定义添加
media = ${KK_MEDIA:mp3,wav,mp4,flv}
#是否开启多媒体类型转视频格式转换,目前可转换视频格式有:avi,mov,wmv,3gp,rm
#请谨慎开启此功能,建议异步调用添加到处理队列,并且增加任务队列处理线程,防止视频转换占用完线程资源,转换比较耗费时间,并且控制了只能串行处理转换任务
media.convert.disable = ${KK_MEDIA_CONVERT_DISABLE:false}
#支持转换的视频类型
convertMedias = ${KK_CONVERTMEDIAS:avi,mov,wmv,mkv,3gp,rm}
#office类型文档(word ppt)样式,默认为图片(image),可配置为pdf(预览时也有按钮切换)
office.preview.type = ${KK_OFFICE_PREVIEW_TYPE:image}
#是否关闭office预览切换开关,默认为false,可配置为true关闭
office.preview.switch.disabled = ${KK_OFFICE_PREVIEW_SWITCH_DISABLED:false}

#是否禁止下载转换生成的pdf文件
pdf.download.disable = ${KK_PDF_DOWNLOAD_DISABLE:true}
#是否禁用首页文件上传
file.upload.disable = ${KK_FILE_UPLOAD_ENABLED:false}

#预览源为FTP时 FTP用户名,可在ftp url后面加参数ftp.username=ftpuser指定,不指定默认用配置的
ftp.username = ${KK_FTP_USERNAME:ftpuser}
#预览源为FTP时 FTP密码,可在ftp url后面加参数ftp.password=123456指定,不指定默认用配置的
ftp.password = ${KK_FTP_PASSWORD:123456}
#预览源为FTP时, FTP连接默认ControlEncoding(根据FTP服务器操作系统选择,Linux一般为UTF-8Windows一般为GBK),可在ftp url后面加参数ftp.control.encoding=UTF-8指定,不指定默认用配置的
ftp.control.encoding = ${KK_FTP_CONTROL_ENCODING:UTF-8}

#水印内容
#例:watermark.txt = ${WATERMARK_TXT:凯京科技内部文件,严禁外泄}
#如需取消水印,内容设置为空即可,例:watermark.txt = ${WATERMARK_TXT:}
watermark.txt = ${WATERMARK_TXT:}
#水印x轴间隔
watermark.x.space = ${WATERMARK_X_SPACE:10}
#水印y轴间隔
watermark.y.space = ${WATERMARK_Y_SPACE:10}
#水印字体
watermark.font = ${WATERMARK_FONT:微软雅黑}
#水印字体大小
watermark.fontsize = ${WATERMARK_FONTSIZE:18px}
#水印字体颜色
watermark.color = ${WATERMARK_COLOR:black}
#水印透明度,要求设置在大于等于0.005,小于1
watermark.alpha = ${WATERMARK_ALPHA:0.2}
#水印宽度
watermark.width = ${WATERMARK_WIDTH:180}
#水印高度
watermark.height = ${WATERMARK_HEIGHT:80}
#水印倾斜度数,要求设置在大于等于0,小于90
watermark.angle = ${WATERMARK_ANGLE:10}

*更多配置等问题,移步 官方文档

–End

下面是使用 Spring Boot + Vue 实现 KKFileView 与 MinIO 文件预览的具体操作步骤: 1. 首先,需要安装并启动 MinIO,可以从官网下载并安装对应平台的版本。 2. 创建一个新的 MinIO 存储桶,并将需要预览文件上传到该存储桶中。 3. 使用 Spring Boot 创建一个新的 Web 应用程序,并添加 MinIO 的客户端依赖,如下所示: ```xml <dependency> <groupId>io.minio</groupId> <artifactId>minio</artifactId> <version>6.1.0</version> </dependency> ``` 4. 创建一个 MinIO 客户端实例,并使用该实例获取存储桶中的文件 URL,如下所示: ```java import io.minio.MinioClient; import io.minio.errors.MinioException; public class MinioUtils { private static final String ENDPOINT = "your-minio-endpoint"; private static final String ACCESS_KEY = "your-minio-access-key"; private static final String SECRET_KEY = "your-minio-secret-key"; private static final String BUCKET_NAME = "your-bucket-name"; private static final MinioClient minioClient; static { try { minioClient = new MinioClient(ENDPOINT, ACCESS_KEY, SECRET_KEY); } catch (Exception e) { throw new RuntimeException(e); } } public static String getFileUrl(String fileName) { try { return minioClient.presignedGetObject(BUCKET_NAME, fileName); } catch (Exception e) { throw new RuntimeException(e); } } } ``` 其中,getFileUrl 方法用于获取指定文件在 MinIO 存储桶中的 URL。 5. 使用 Vue 创建一个新的 Web 界面,并引入 KKFileView 的 JavaScript 文件,如下所示: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文件预览</title> <script src="https://cdn.koalaxiezi.com/kkfileview/4.0.6/kkfileview.min.js"></script> <link href="https://cdn.koalaxiezi.com/kkfileview/4.0.6/kkfileview.min.css" rel="stylesheet"> </head> <body> <div id="app"></div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="app.js"></script> </body> </html> ``` 6. 在 Vue 的 app.js 文件中,使用 Axios 获取 MinIO 存储桶中的文件 URL,并将其传递给 KKFileView 进行预览,如下所示: ```javascript import axios from 'axios' import KKFileView from 'kkfileview' new Vue({ el: '#app', created() { axios.get('/getFileUrl?fileName=test.pdf').then((response) => { KKFileView.open(response.data) }) } }) ``` 其中,getFileUrl 接口用于返回指定文件在 MinIO 存储桶中的 URL,response.data 是从接口返回的 URL。 7. 在 Spring Boot 应用程序中,创建 getFileUrl 接口,用于返回指定文件在 MinIO 存储桶中的 URL,如下所示: ```java import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; @RestController public class FileController { @GetMapping("/getFileUrl") public String getFileUrl(@RequestParam String fileName) { return MinioUtils.getFileUrl(fileName); } } ``` 8. 启动 Spring Boot 应用程序和 Vue Web 界面,访问 Vue Web 界面,即可在线预览 MinIO 存储桶中的文件。 需要注意的是,为了保证文件访问的安全性,需要在 MinIO 中设置适当的访问权限,确保只有授权的用户才能访问存储桶中的文件。同时,KKFileView 也提供了一些安全设置,如设置访问密码等,可以进一步加强文件访问的安全性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值