springboot整合kkFileView部署,前端使用

前言:

官方文档:https://kkfileview.keking.cn/zh-cn/docs/production.html
在这里插入图片描述

docker方式或加入星球获取发行包直接获取启动,无需以下步骤:

拉取镜像

# 网络环境方便访问docker中央仓库
docker pull keking/kkfileview:4.1.0

# 网络环境不方便访问docker中央仓库
wget https://kkfileview.keking.cn/kkFileView-4.1.0-docker.tar
docker load -i kkFileView-4.1.0-docker.tar

运行
docker run -it -p 8012:8012 keking/kkfileview:4.1.0

kkFileView是一个很好的文件预览系统,初期开源维护时gitee和github上会直接提供发行包,现只有加入星球(99元一年)才能获取发行包。以下为源码方式部署使用细节。

1.下载源码(获取最新源码即可)
https://gitee.com/kekingcn/file-online-preview/tree/v4.4.0-beta/
在这里插入图片描述

2.IDE工具编译成jar包(无需更改任何文件)
在这里插入图片描述
3.jar包上传到服务器,这里分windows服务器和linux服务器版,都需安装openOffice或LibreOffice,否则无法启动。

windows安装openOffice:https://www.openoffice.org/zh-cn/download/
在这里插入图片描述

linux安装LibreOffice:https://blog.csdn.net/an129/article/details/126766228?spm=1001.2014.3001.5506

安装完后执行java -jar kkFileView.jar即可,默认端口为8012,能访问到此页面并能在页面上正常预览则说明部署成功。
在这里插入图片描述

4.前端使用
在这里插入图片描述
安装 base64 编码解码:

npm install --save js-base64

在下载按钮下方新写一个预览按钮

<el-button
    type="text"
    size="small"
    icon="el-icon-download"
    @click="download(scope.row, scope.index)"
>下载
</el-button>
// 以下新增一个预览按钮
<el-button
    type="text"
    size="small"
    icon="el-icon-upload"
    @click="view(scope.row, scope.index)"
>预览
</el-button>
 

实现调用 view 方法

const handlePreview = (row: any, fileName: string, files: any) => {
  findObjectURL(fileName).then((response) => {
    window.open(
      `${store.getters['previewUrl']}/onlinePreview?url=` +
        encodeURIComponent(Base64.encode(response.data)) +
        `&fullfilename=test.${fileName.split('.')[1]}`,
      '_blank'
    );
  });
};

注:此处需要传入url才能正常使用预览,但是kkFileView需要以正常文件后缀名结尾的url才能使用,如:http://127.0.0.1:8081?fileName = 1.xlsx格式。但一般系统都是以文件名或id请求后端接口获取的文件流数据,还有如minio等文件系统的临时文件url后面会跟一些权限信息,导致并不是以文件后缀结尾故预览失败。解决方法为:请求接口上提供了fullfilename参数,只需给一个默认的文件名并指定相应后缀即可,如上代码所示。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/647010.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

明星IP切片带货爆单营,0基础搞定IP切片带货短视频(69节课)

把握带货趋势&#xff0c;了解切片流程&#xff0c;剪辑带货创收营 课程目录&#xff1a; 01第一章实操链路-第一节IP选择.mp4 02第一章实操链路-第二节账号准备.mp4 03第一章实操链路-第四节开通权限.mp4 04第一章实操链路-第五节货品准备.mp4 05第一章实操链路-第六节素…

Java进阶学习笔记26——包装类

包装类&#xff1a; 包装类就是把基本类型的数据包装成对象。 看下API文档&#xff1a; deprecated&#xff1a;极力反对、不赞成的意思。 marked for removal&#xff1a;标识为去除的意思。 自动装箱&#xff1a;基本数据类型可以自动转换成包装类。 自动拆箱&#xff1a;…

编写子函数+最大公约数和最小公倍数

目录 计算级数和 判断并找出非素数 主函数操作流程 求最大公约数和最小公倍数 编写子函数&#xff0c;该函数的功能是是计算下列级数和&#xff0c;并将和值返回主调函数输出。数据由主函数输入。 fun 函数 sum 函数 main 函数 注意事项 编写函数&#xff0c;该函数的…

Jenkins pipeline发布前端项目

说明&#xff1a;第一次使用jenkins生成pipeline片段&#xff0c;做个记录... 1.全局工具配置添加自定义node版本 2.系统管理添加前端应用部署服务器 2.1 点击高级选择账号密码验证方式&#xff0c;添加服务器的用户和密码 3.系统管理--凭据--系统--全局凭据--添加自己的git凭据…

总是等不是办法,向媒体投稿你得学会用新方法

初入信息宣传领域,我怀揣着对文字的热爱与传播价值的热情,肩负起了单位活动的宣传报道重任。那时的我,满脑子都是传统的投稿思维:精心撰写每一篇稿件,然后逐一搜寻各大媒体的投稿邮箱,一封封邮件满怀期待地发出,像播撒希望的种子,渴望在广袤的媒体土壤中生根发芽。然而,理想很丰…

Hibernate

主流ORM框架Object Relation Mapping对象关系映射&#xff0c;将面向对象映射成面向关系。 如何使用 1、导入相关依赖 2、创建Hibernate配置文件 3、创建实体类 4、创建实体类-关系映射文件 5、调用Hibernate API完成操作 具体操作 1、创建 Maven工程&#xff0c;在pom.xml中导…

基于PID的单片机温度控制系统设计

基于PID的温度控制系统设计 摘要 温度是工业上最基本的参数&#xff0c;与人们的生活紧密相关&#xff0c;实时测量温度在工业生产中越来越受到重视&#xff0c;离不开温度测量所带来的好处&#xff0c;因此研究控制和测量温度具有及其重要的意义。 本设计介绍了以AT89C52单片…

Go GORM介绍

GORM 是一个功能强大的 Go 语言 ORM&#xff08;对象关系映射&#xff09;库&#xff0c;它提供了一种方便的方式来与 SQL 数据库进行交互&#xff0c;而不需要编写大量的 SQL 代码。 GORM的关键特性 全功能的ORM&#xff1a;支持几乎所有的ORM功能&#xff0c;包括模型定义、基…

揭秘C++ String容器:字符串操作的艺术

目录 ​编辑 引言 一、初识std::string&#xff1a;构造与初始化 二、字符串的操纵艺术&#xff1a;拼接、查找与替换 三、访问与遍历&#xff1a;字符的细腻触感 四、大小与容量&#xff1a;动态调整的智慧 五、进阶功能&#xff1a;探索更多可能 结语 引言 在C标准库…

vue3+electron+typescript 项目安装、打包、多平台踩坑记录

环境说明 这里的测试如果没有其他特别说明的&#xff0c;就是在win10/i7环境&#xff0c;64位 创建项目 vite官方是直接支持创建electron项目的&#xff0c;所以&#xff0c;这里就简单很多了。我们已经不需要向开始那样自己去慢慢搭建 yarn create vite这里使用yarn创建&a…

特殊变量笔记3

输入一个错误命令, 在输出$? 特殊变量&#xff1a;$$ 语法 $$含义 用于获取当前Shell环境的进程ID号 演示 查看当前Shell环境进程编号 ps -aux|grep bash输出 $$ 显示当前shell环境进程编号 小结 常用的特殊符号变量如下 特殊变量含义$n获取输入参数的$0, 获取当前She…

将3D检测的box框投影到BEV图片上

前言 点云数据作为一种丰富的三维空间信息表达方式&#xff0c;通常用于自动驾驶、机器人导航和三维建模等领域。然而&#xff0c;点云数据的直观性不如二维图像&#xff0c;这限制了它在一些需要快速视觉反馈的应用场景中的使用。本文将探讨如何将点云数据转换为二维图像&…

Thymeleaf 搭建家居网首页

文章目录 1.引入Thymeleaf sunliving-commodity模块1.在resources目录下引入Thymeleaf 所需资源2.pom.xml引入Thymeleaf依赖3.application.yml 关闭缓存&#xff0c;使页面实时刷新4.在application-prod.yml开启缓存5.编写com/sun/sunliving/commodity/web/IndexController.jav…

OpenUI 可视化 AI:打造令人惊艳的前端设计!

https://openui.fly.dev/ai/new 可视化UI的新时代&#xff1a;通过人工智能生成前端代码 许久未更新, 前端时间在逛github&#xff0c;发现一个挺有的意思项目&#xff0c;通过口语化方式生成前端UI页面&#xff0c;能够直观的看到效果&#xff0c;下面来给大家演示下 在现代…

idea2023的git从dev分支合并到主分支master

1.本地项目切换到主分支master 右键项目-git-Branches 依次点击项目-Remote-Origin-master-CheckOut 现在你的idea中的这个项目就是远程master分支的代码了。 2.合并dev分支到master 右击项目-git-Merge 选择origin-dev 点击Merge按钮&#xff0c;此时只是合并到本地的maste…

Weblogic XML反序列化漏洞 [CVE-2017-10271]

漏洞环境搭建请参考 http://t.csdnimg.cn/i11e2 漏洞原理 Weblogic的wls security组件对外提供webservice服务&#xff0c;wls security组件使用了xmldecoder来解析用户传入的xml数据&#xff0c;如果用户进行xml恶意数据的构造&#xff0c;即可触发反序列化漏洞 漏洞版本 O…

【MySQL】聊聊count的相关操作

在平时的操作中&#xff0c;经常使用count进行操作&#xff0c;计算统计的数据。那么具体的原理是如何的&#xff1f;为什么有时候执行count很慢。 count的实现方式 select count(*) from student;对于MyISAM引擎来说&#xff0c;会把一个表的总行数存储在磁盘上&#xff0c;…

Dbs封装_连接池

1.Dbs封装 每一个数据库都对应着一个dao 每个dao势必存在公共部分 我们需要将公共部分抽取出来 封装成一个工具类 保留个性化代码即可 我们的工具类一般命名为xxxs 比如Strings 就是字符串相关的工具类 而工具类 我们将其放置于util包中我们以是否有<T>区分泛型方法和非泛…

pycharm连接阿里云服务器过程记录

因为不想用自己的电脑安装anaconda环境,所以去查了一下怎么用服务器跑代码,试着用pycharm连接阿里云服务器,参考了很多博客,自己简单配置了一下,记录一下目前完成的流程. 主要是:阿里云服务器的远程登录和安装anaconda,以及怎么用pycharm连接阿里云服务器上的解释器. 小白刚开始…

Java进阶学习笔记27——StringBuilder、StringBuffer

StringBuilder&#xff1a; StringBuilder代表可变字符串对象&#xff0c;相当于一个容器&#xff0c;它里面装的字符串是可以改变的&#xff0c;就是用来操作字符串的。 好处&#xff1a; StringBuilder比String更适合做字符串的修改操作&#xff0c;效率会更高&#xff0c;…