网站首页 > 技术文章 正文
kkFileView是使用spring boot打造文件文档在线预览项目解决方案,支持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等文件在线预览,然后前端直接使用后端地址即可进行访问(前端使用方法,地址代理方法,在文章最后有写)
一、项目特性
- 支持office,pdf等办公文档
- 支持txt,java,php,py,md,js,css等所有纯文本
- 支持zip,rar,jar,tar,gzip等压缩包
- 支持jpg,jpeg,png,gif等图片预览(翻转,缩放,镜像)
- 使用spring boot开发,预览服务搭建部署非常简便
- rest接口提供服务,跨平台特性(java,php,python,go,php,....)都支持,应用接入简单方便
- 抽象预览服务接口,方便二次开发,非常方便添加其他类型文件预览支持
- 最最重要Apache协议开源,代码pull下来想干嘛就干嘛
二、在线体验
请善待公共服务,会不定时停用
地址:http://file.keking.cn/
三、项目文档(Project documentation)
- 详细wiki文档:https://gitee.com/kekingcn/file-online-preview/wikis/pages
- 中文文档:https://gitee.com/kekingcn/file-online-preview/blob/master/README.md
- English document:https://github.com/kekingcn/kkFileView/blob/master/README.en.md
五、预览效果
五、前端使用
前端使用方法文档里有写,但是不是很详细,这里在说明一下
1.使用预览
var originUrl = '
http://127.0.0.1:8080/filedownload?fileId=1'; //要预览文件的访问地址(可以是下载地址)
var previewUrl = originUrl + '&fullfilename=test.txt' //要预览文件的名字(可选择使用,不是必填项)
window.open('
http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(previewUrl)); //地址记得转码
2.使用代理
如果不想暴露服务器部署的地址和端口,前端可以使用代理的方式,我们项目用的nuxt构建,所以可以在nuxt.config.js的proxy添加一条规则即可
proxy: [
[
'/preview',
{
target: 'http://xxx.xxx.com.cn:8012',
pathRewrite: {
'^/preview': '/'
}
}
]
]
然后使用的时候,在访问的链接加上这个过滤‘/preview’即可
let originUrl = 'http://127.0.0.1:8080/filedownload?fileId=1'var previewUrl = originUrl + '&fullfilename=test.txt'
window.open('/preview/onlinePreview?url='+encodeURIComponent(previewUrl));
这样访问的时候,前端自动会把预览文件的地址转发到服务器的预览地址,而不会直接暴露服务器配置和端口
服务器内部也可以是使用nginx代理来配置,跟nuxt代理一致,这里不再详细描述~~
猜你喜欢
- 2025-03-19 在线文档预览kkFileView部署及使用指南
- 2025-03-19 什么是 URL 编码 (URL Encode)(url编码的作用)
- 2025-03-19 全国首辆氢燃料重型卡车,漳州制造!续航一千公里
- 2025-03-19 惊涛骇浪洪水汹涌 他们又一次挺身而出——记抗洪救灾中的体彩人
- 2025-03-19 群晖无法拉取Docker镜像?最稳定的方法:搭建自己的加速服务!
- 2025-03-19 Springboot之登录模块探索(含Token,验证码,网络安全等知识)
- 2025-03-19 超详细带你从入门开始,开发一个超实用的浏览器插件
- 2025-03-19 速腾小组件,最全教程!速看(21款速腾按钮图标解说)
- 2025-03-19 Python 和 JavaScript 终于联姻了!PythonMonkey 要火?
- 2025-03-19 【HarmonyOS Next】dsbridge的跨端交互
- 最近发表
- 标签列表
-
- cmd/c (64)
- c++中::是什么意思 (83)
- 标签用于 (65)
- 主键只能有一个吗 (66)
- c#console.writeline不显示 (75)
- pythoncase语句 (81)
- es6includes (73)
- sqlset (64)
- windowsscripthost (67)
- apt-getinstall-y (86)
- node_modules怎么生成 (76)
- chromepost (65)
- c++int转char (75)
- static函数和普通函数 (76)
- el-date-picker开始日期早于结束日期 (70)
- localstorage.removeitem (74)
- vector线程安全吗 (70)
- & (66)
- java (73)
- js数组插入 (83)
- linux删除一个文件夹 (65)
- mac安装java (72)
- eacces (67)
- 查看mysql是否启动 (70)
- 无效的列索引 (74)