需求描述: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)));

至此可以实现在线文件预览。

欢迎大家提出问题!

Logo

前往低代码交流专区

更多推荐