使用 kkFileView 实现在线文件预览
vue2后台管理项目,点击列表操作按钮--查看文件,预览相应文件。
·
需求描述:vue2后台管理项目,点击列表操作按钮--查看文件,预览相应文件。
效果:点击后会在新窗口打开,如下图:
写在前面:此文只涉及前端使用部分,后端部署方面可进入官方文档“部署指南”模块自行查找。
附上官方文档地址:kkFileView - 在线文件预览
kkFileView 使用流行的spring boot搭建,支持预览doc,docx,Excel,pdf,txt,zip,rar,图片等格式的文件。
使用过程:
1、安装js-base64
npm install js-base64 --save-dev
在使用Base64的组件中引入Base64
import { Base64 } from 'js-base64';
2、本例使用的是“普通文件下载url预览”,是后端将文件链接返回给前端
var url = 'http://127.0.0.1:8080/file/test.docx'; //要预览文件的访问地址
window.open('http://后端部署的域名/onlinePreviewurl='+encodeURIComponent(Base64.encode(url)));
至此可以实现在线文件预览。
欢迎大家提出问题!
更多推荐
已为社区贡献2条内容
所有评论(0)