SpringBoot+Vue+kkFileView实现txt、doc、docx、md等文件在线预览)

简介: SpringBoot+Vue+kkFileView实现txt、doc、docx、md等文件在线预览)

本技术支持 word , excel , ppt,pdf,txt,java,php,py,md,js,css等纯文本或文档的在线预览。


1. 效果图


1.1 预览 txt 文件



1.2 预览 Doc 文件



1.3 预览 Docx 文件



2. 安装所需要的文件


直接 dokcer 安装了哈


拉取镜像


docker pull keking/kkfileview


后台运行


docker run -it -d -p 8012:8012 keking/kkfileview


查看效果


浏览器访问容器8012端口(http://xxx.xxx.xxx.xxx:8012 )即可看到项目演示用首页


3. 项目使用


var url = 'http://xxx:8080/file/test.txt'; //要预览文件的访问地址
window.open('http://XXX:8012/onlinePreview?url='+encodeURIComponent(previewUrl));


VUE 需要安装引入个JS


  1. 安装 base64


npm install --save js-base64


  1. 引入


import { Base64 } from "js-base64";


  1. 使用


var url = ''; //要预览文件的访问地址
window.open('http://XXXXX:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url)));


参考


项目地址


kkfileview官网

相关文章
|
1月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先,创建并配置 Spring Boot 项目,实现后端 API;然后,使用 Ant Design Pro Vue 创建前端项目,配置动态路由和菜单。通过具体案例,展示了如何快速搭建高效、易维护的项目框架。
115 62
|
7天前
|
存储 JavaScript 前端开发
基于 SpringBoot 和 Vue 开发校园点餐订餐外卖跑腿Java源码
一个非常实用的校园外卖系统,基于 SpringBoot 和 Vue 的开发。这一系统源于黑马的外卖案例项目 经过站长的进一步改进和优化,提供了更丰富的功能和更高的可用性。 这个项目的架构设计非常有趣。虽然它采用了SpringBoot和Vue的组合,但并不是一个完全分离的项目。 前端视图通过JS的方式引入了Vue和Element UI,既能利用Vue的快速开发优势,
52 13
|
15天前
|
JavaScript 安全 Java
java版药品不良反应智能监测系统源码,采用SpringBoot、Vue、MySQL技术开发
基于B/S架构,采用Java、SpringBoot、Vue、MySQL等技术自主研发的ADR智能监测系统,适用于三甲医院,支持二次开发。该系统能自动监测全院患者药物不良反应,通过移动端和PC端实时反馈,提升用药安全。系统涵盖规则管理、监测报告、系统管理三大模块,确保精准、高效地处理ADR事件。
|
1月前
|
Java 应用服务中间件
SpringBoot获取项目文件的绝对路径和相对路径
SpringBoot获取项目文件的绝对路径和相对路径
91 1
SpringBoot获取项目文件的绝对路径和相对路径
|
1月前
|
网络协议 Java
springboot配置hosts文件
springboot配置hosts文件
46 11
|
1月前
|
存储 前端开发 JavaScript
|
1月前
|
存储 Java API
|
1月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,帮助开发者提高开发效率和应用的可维护性。
80 2
|
1月前
|
JavaScript NoSQL Java
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
45 0
|
1月前
|
Java
SpringBoot获取文件将要上传的IP地址
SpringBoot获取文件将要上传的IP地址
36 0
下一篇
DataWorks