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官网

相关文章
|
12天前
|
Java 应用服务中间件
SpringBoot获取项目文件的绝对路径和相对路径
SpringBoot获取项目文件的绝对路径和相对路径
49 1
SpringBoot获取项目文件的绝对路径和相对路径
|
6天前
|
网络协议 Java
springboot配置hosts文件
springboot配置hosts文件
33 11
|
23天前
|
XML Java Kotlin
springboot + minio + kkfile实现文件预览
本文介绍了如何在容器中安装和启动kkfileviewer,并通过Spring Boot集成MinIO实现文件上传与预览功能。首先,通过下载kkfileviewer源码并构建Docker镜像来部署文件预览服务。接着,在Spring Boot项目中添加MinIO依赖,配置MinIO客户端,并实现文件上传与获取预览链接的接口。最后,通过测试验证文件上传和预览功能的正确性。
springboot + minio + kkfile实现文件预览
|
12天前
|
存储 前端开发 JavaScript
|
12天前
|
存储 Java API
|
13天前
|
Java
SpringBoot获取文件将要上传的IP地址
SpringBoot获取文件将要上传的IP地址
28 0
|
20天前
|
缓存 Java 程序员
Java|SpringBoot 项目开发时,让 FreeMarker 文件编辑后自动更新
在开发过程中,FreeMarker 文件编辑后,每次都需要重启应用才能看到效果,效率非常低下。通过一些配置后,可以让它们免重启自动更新。
23 0
|
1月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,包括版本兼容性、安全性、性能调优等方面。
137 1
|
16天前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先,创建并配置 Spring Boot 项目,实现后端 API;然后,使用 Ant Design Pro Vue 创建前端项目,配置动态路由和菜单。通过具体案例,展示了如何快速搭建高效、易维护的项目框架。
94 62
|
14天前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,帮助开发者提高开发效率和应用的可维护性。
32 2

热门文章

最新文章