文件预览的终级解决方案-kkFileView

boyanx7个月前技术教程33

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等文件在线预览,然后前端直接使用后端地址即可进行访问(前端使用方法,地址代理方法,在文章最后有写)


一、项目特性

  1. 支持office,pdf等办公文档
  2. 支持txt,java,php,py,md,js,css等所有纯文本
  3. 支持zip,rar,jar,tar,gzip等压缩包
  4. 支持jpg,jpeg,png,gif等图片预览(翻转,缩放,镜像)
  5. 使用spring boot开发,预览服务搭建部署非常简便
  6. rest接口提供服务,跨平台特性(java,php,python,go,php,....)都支持,应用接入简单方便
  7. 抽象预览服务接口,方便二次开发,非常方便添加其他类型文件预览支持
  8. 最最重要Apache协议开源,代码pull下来想干嘛就干嘛


二、在线体验

请善待公共服务,会不定时停用

地址:http://file.keking.cn/


三、项目文档(Project documentation)

  1. 详细wiki文档:https://gitee.com/kekingcn/file-online-preview/wikis/pages
  2. 中文文档:https://gitee.com/kekingcn/file-online-preview/blob/master/README.md
  3. 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代理一致,这里不再详细描述~~

相关文章

整合 kkfile 实现文件预览

一、简介kkFileView为文件文档在线预览解决方案,该项目使用流行的spring boot搭建,易上手和部署,基本支持主流办公文档的在线预览,如doc,docx,xls,xlsx,ppt,pptx...

将 Safari 打造成 iOS 里的快速启动中心:Bookmarklet

Safari 作为 iOS 设备上我们使用最为频繁的 App 之一,它除了能让我们翱翔于无边的网际之外,其实利用它本身自带的书签功能我们还可以将其打造成一个快速启动中心。在桌面环境中大多数浏览器都允许...

这13个前端库,帮我在工作中赢得了不少摸鱼时间

前言平时开发的过程中,常常会使用到一些第三方库来提高开发效率,我总结了自己工作这么久以来经常用到的 13 个库,希望对大家有帮助~antd全称应该是Ant Design,这是一个 React 的组件库...

【验证码逆向专栏】最新某度旋转验证码 v2 逆向分析

声明本文章中所有内容仅供学习交流使用,不用于其他任何目的,不提供完整代码,抓包内容、敏感网址、数据接口等均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关!本文章未经许可禁...

python入门-day30:项目优化与总结

我们将优化之前的 Flask 聊天机器人,添加记忆功能,并总结 30 天学习成果,最后提出下一步建议。优化聊天机器人 - 添加记忆功能为了让聊天机器人更智能,我们将改进上下文管理,添加长期记忆功能,使...

前端搭建 MCP Client(Web版)+ Server + Agent 实践

关注更多AI编程资讯请去AI Coding专区:https://juejin.cn/aicoding先上个效果图,上图是在 web 版 Client 中使用 todoist-mcp-server 帮我...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。