vue使用kkfileview文件预览功能
1.环境要求:
java 1.8+
2.部署运行:
本机以及虚拟机上运行:
1.从https://gitee.com/kekingcn/file-online-preview/releases地址下载最新的版发行包
2.解压kkFileView-2.x.x.Zip包
3.打开解压后文件夹的bin目录,运行startup脚本(Windows下以管理员身份运行startup.bat
,Linux以root用户运行startup.sh
)
4.浏览器访问本机8012端口(http://127.0.0.1:8012 )即可看到项目演示用首页
3.项目实施:
在文件上传组件后配置预览选项
<span @click='preView'>预览</span>
点击方法
preView(){
var originUrl = 'http://127.0.0.1:8080/filedownload?fileId=1'; //要预览文件的访问地址
var previewUrl = originUrl + '&fullfilename='+文件名称
window
.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(previewUrl));
}
4.kkFileView文档:
https://gitee.com/kekingcn/file-online-preview/wikis/Home?sort_id=1444366
vue使用kkfileview文件预览功能的更多相关文章
- 利用 ICEpdf 快速实现 pdf 文件预览功能
之前工作中,需要实现一个在线预览pdf的功能,一开始用的的 jQuery-media 插件来实现的,后来感觉有点慢,就继续寻找更好的替代品,直到遇见了 ICE pdf... ICEpdf (官网:ht ...
- win10打文件预览功能
- JS通过使用PDFJS实现基于文件流的预览功能
需求: 使用JS实现PDF文件预览功能 备选方案: 使用ViewerJS,官网 http://viewerjs.org/ 使用PDFJS,官网 https://mozilla.github.io/ ...
- java实现office文件预览
不知觉就过了这个久了,继上篇java实现文件上传下载后,今天给大家分享一篇java实现的对office文件预览功能. 相信大家在平常的项目中会遇到需要对文件实现预览功能,这里不用下载节省很多事.大家请 ...
- COS控制台进阶 - 文件预览和在线编辑
导语 | COS控制台新上线了文件预览功能,用户可在控制台内直接预览.编辑文件内容. 前不久,微软发布了 vscode for web 的公告,是基于web的在线代码编辑器,无需下载安装可以直接在we ...
- fis3+vue+pdf.js制作预览PDF文件或其他
人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠 ...
- Vue PDF文件预览vue-pdf
最近做项目,遇到预览PDF这个功能,在网上找了找,大多推荐的是pdf.js,不过在Vue中还是想偷懒直接npm组件,最后找到了一个还不错的Vue-pdf 组件,GitHub地址:https:// ...
- Django文件上传三种方式以及简单预览功能
主要内容: 一.文件长传的三种方式 二.简单预览功能实现 一.form表单上传 1.页面代码 <!DOCTYPE html> <html lang="en"> ...
- 原生js实现ajax的文件异步提交功能、图片预览功能.实例
采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...
随机推荐
- MySQL Execute Plan--Index Merge特性
Index Merge特性 在MySQL 5.5之前版本中,查询或子查询被限制在一个表只能使用一个索引(回表查询除外). 假设表TB1001上C1和C2列分别有单列索引,如对下面查询: SELECT ...
- C语言再学习part1-宏观认识C语言
天下莫柔弱于水,而攻坚强者莫之能胜,以其无以易之也.弱之胜强,柔之胜刚,天下莫不知行,莫能行. —老子 我近来每天都在坚持读书,所以我一直沉浸于古人的智慧中无法自拔.所以如果我这篇博文被你有幸看到,那 ...
- Elasticsearch配置集群环境
环境选择: 1.方案一:准备三台机器 每一台机器一个节点 2.方案二:准备一台机器 启动三个节点,用端口号区分即可 3.ES启 ...
- 【MVC】Scripts.Render的用法
一.配置BundleConfig.cs文件 1.首先要在App_Start 里面BundleConfig.cs 文件里面 添加要包含的css文件2.BundleConfig就是一个微软新加的 一个打包 ...
- 剑指offer-面试题56_2-数组中唯一只出现一次的数字-位运算
/* 题目: 数组中除一个数字只出现一次外,其余数字都出现3次. */ /* 思路: 位运算. */ #include<iostream> #include<cstring> ...
- PTA 学生成绩链表处理(C语言)
本题要求实现两个函数,一个将输入的学生成绩组织成单向链表:另一个将成绩低于某分数线的学生结点从链表中删除. 函数接口定义: struct stud_node *createlist(); struct ...
- take it away `electron-builder` Electron打包失败的问题
出现这个问题 出现问题原因是程序占用 , 在后台进程中将Electron的服务干掉以后再打包
- Spring Aop和Spring Ioc(一)
Spring Aop Aop: 面向切面编程的本质:面向切面编程,指扩展功能不修改源代码,将功能代码从业务逻辑代码中分离出来. 1:主要功能:日志记录,性能统计,安全控制,事务处理,异常处理等等. 2 ...
- Redis初级安装及使用
env:ubuntu 19.04 redis官网: redis.io 安装步骤: 1.wget http://download.redis.io/releases/redis-5.0.7.tar.gz ...
- Minion 主机同步失败问题,全过程
如果出现以下状态 token也有了 这个是salt-api 说明你salt-api没问题 点击同步主机 查看你产品线管理那里,添加了你这个salt-api没? 配置参考文档 https://gith ...