在线文件预览工具kkFileView初体验

2024-06-03 11:25:26

一、使用背景

项目开发中需要使用预览功能查看pdf、MP4、doc、ppt等格式的文件。还有添加水印等其他功能。

二、kkFileView使用（请直接移步官方文档、简单快速上手）

https://kkfileview.keking.cn/zh-cn/docs/home.html

三、过程中遇到的问题

项目发布后对外暴露https地址、而kkFileView默认是ip+端口。所有需要nginx配置反向代理。
使用jar包起服务的用户请参考官网配置

base.url
说明：提供预览服务的地址，默认从接收请求url读，如果使用nginx等反向代理，需要手动设置为通过nginx访问预览服务的地址
默认值：未设置
示例：base.url = https://file.keking.cn
例如nginx的访问地址为 http://file.keking.cn 想要使用 http://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 = http://file.keking.cn/preview
使用如下地址来访问预览页面

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

docker启动kkFileView如何修改为https访问

docker run -it -d -p 8012:8012 -e BASE_URL=“https://xxxx.top/preview” -e SERVER_CONTEXT-PATH="/preview" keking/kkfileview

  location /preview {proxy_set_header HOST $host;proxy_set_header X-Forwarded-Proto $scheme;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_pass http://ip:8012;#这里注意端口}

接入完成，可以开心的使用了。

在线文件预览工具kkFileView初体验相关推荐

厉害了，手把手教你搭建一个代码在线编辑预览工具
点击下方"前端开发博客",选择"设为星标" 回复"2"加入前端群简介大家好,我是一个闲着没事热衷于重复造轮子的不知名前端,今天给大家带来 ...
手把手教你快速搭建一个代码在线编辑预览工具
简介大家好,今天我跟大家分享的是一个代码在线编辑预览工具的实现教程,手把手教你完成这样一个项目. 目前这类工具使用很广泛,常见于各种文档网站及代码分享场景,相关工具也比较多,如codepen.jsr ...
最近很火的在线文件预览txt、doc、ppt、pdf、excel、jpg、png、zip、tar.gz等各种文件及压缩文件在线解压和预览，包括前后端设计和源码，编写搜索引擎多关键词检索名称和内容（五）
最近很火的在线文件预览txt.doc.ppt.pdf.excel.jpg.mp4.png.zip.tar.gz等各种文件及压缩文件在线解压和预览,包括前后端设计和源码,编写一个文件搜索引擎实现多关键词 ...
最近很火的在线文件预览txt、doc、ppt、pdf、excel、jpg、png、zip、tar.gz等各种文件及压缩文件在线解压和预览，包括前后端设计和源码，编写搜索引擎多关键词检索名称和内容（四）
最近很火的在线文件预览txt.doc.ppt.pdf.excel.jpg.mp4.png.zip.tar.gz等各种文件及压缩文件在线解压和预览,包括前后端设计和源码,编写一个文件搜索引擎实现多关键词 ...
基于java的格式转换，word 转 pdf、word 转图片、office 格式转换、在线文件预览
一.项目简介不管你是java程序员.c++程序员,python程序员,在开发项目中肯定遇到过格式转换的问题,如何轻松搞定格式转换的问题呢?当然是百度啦!面向百度编程已经成为当下程序员的日常操作. 基 ...
kkFileView在线文件预览搭建
1.kkFileView介绍目录 1.kkFileView介绍 2.源码下载 3.项目启动及配置文件 4.项目打包及部署 4.1 打包 4.2 部署 4.3 查看日志 5.项目接入kkFileVie ...
搭建一个代码在线编辑预览工具
本文主要介绍的是第二类其中的一种实现方式,完全不依赖于后端,所有逻辑都在前端完成,实现起来相当简单,使用的是vue3全家桶来开发,使用其他框架也完全可以. ps.在本文基础上笔者开发了一个完整的线上工 ...
kkFileView安装及使用——文件预览解决方案
目录一.前言二.kkFileView介绍三.kkFileView安装四.kkFileView的配置和使用一.前言网页端一般会遇到各种文件,比如:txt.doc.docx.pdf.xml.x ...
基于开源项目kkFileView打造文件预览
1.需求一般管理系统都有文件上传功能,基于此一般会诞生一个需求:用户需要在线预览自己上传的文件.需求很合理,但是没那么好做,原因在于浏览器默认支持图片.pdf等少量格式预览,而实际情况是你并不能要求 ...

最新文章

热门文章