当前位置:首页 > 技术分析 > 正文内容

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

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代理一致,这里不再详细描述~~

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/4551.html

分享给朋友:

“文件预览的终级解决方案-kkFileView” 的相关文章

云时代,Linux和容器为王,微软推出自己的发行版Azure Linux

看到今天的微软,其前CEO史蒂夫.鲍尔默肯定会后悔在15年前说过的一句话“Linux 是一种癌症(Linux is a cancer)”。 因为今天的微软不光靠Linux赚的钵满盆满,而且还发行了自己的Linux发行版Azure Linux。为了提高其云服务和容器化服务水平,其Azure公有云平台提...

博信股份新战略后再推新品 TOPPERS E2耳机售价199元

中新网6月21日电 20日,博信股份在北京正式推出新品TOPPERS主动降噪耳机E2,这是博信股份继2月战略暨新品发布会后的第二次新品亮相。价格方面,TOPPERS主动降噪耳机E2零售价199元,并于6月20日下午4点在京东商城公开销售。据介绍,TOPPERS主动降噪耳机E2采用AMS(奥地利微电子...

10款超牛Vim插件,爱不释手了

我是一个忠实的Vim编辑器用户,从事开发工作多年,我一直都非常喜欢使用Vim。轻量、便捷,而且,熟悉了Vim相关的快捷键之后,效率能够成倍的提升。除了这些之外,Vim像很多知名的IDE、编辑器一样,也支持插件配置,通过这些插件,可以实现更多高级、高效的操作。今天,就来给大家分享10个我特别喜欢的Vi...

Vue真是太好了 壹万多字的Vue知识点 超详细!

1??、Vue和其他两大框架的区别Angular 学习成本太高React 代码可读性差Vue 学习成本较低 很容易上手VUE官方: https://cn.vuejs.org/v2/guide/comparison.html?2??、Vue是什么Vue是一套用于构建用户界面的渐进式框架 "前端...

深入理解vue-router原理

说到vue-router就表明他只适合于vue和vue是强绑定的关系;不适合其他框架;现在我们模仿实现一个VueRouter;1.要使页面刷新;借助vue本身的响应式原理;import Home from "./views/Home"; import About from "...