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-buttontype="text"size="small"icon="el-icon-download"@click="download(scope.row, scope.index)"
>下载
</el-button>
// 以下新增一个预览按钮
<el-buttontype="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参数,只需给一个默认的文件名并指定相应后缀即可,如上代码所示。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

二元关系表示

一、二元关系的定义和表示 什么是二元关系&#xff1f;对集合A和B&#xff0c;A\timesB的任意子集R为A到B的一个二元关系。当AB时&#xff0c;A\timesA的任一子集R称为A上的一个二元关系。在不引起误解的情况下&#xff0c;二元关系可简称关系。 若|A|m,|B|n&#xff0c;则A到…

手机版AI写作软件哪个好用?5款AI写作软件分享

在这个快节凑的时代&#xff0c;人们对于高效、便捷的创作方式很是追求。尤其是在人工智能技术发展迅速的今天&#xff0c;AI写作软件的出现&#xff0c;让很多自媒体创作者都会想到在手机上面进内容创作&#xff0c;这样不仅能提高工作效率&#xff0c;而且工作的自由度会更高…

自动化运维(AIOps): 现代IT管理的革命

在数字化时代&#xff0c;企业的 IT 系统变得愈加复杂。从云计算到大数据&#xff0c;从物联网到人工智能&#xff0c;技术的飞速发展使得企业面临前所未有的挑战。这种复杂性不仅体现在数据量和数据流的增加上&#xff0c;还包括高成本和高错误率的运维需求。在此背景下&#…

基于51单片机的盆栽自动浇花系统

一.硬件方案 工作原理是湿度传感器将采集到的数据直接传送到ADC0832的IN端作为输入的模拟信号。选用湿度传感器和AD转换&#xff0c;电路内部包含有湿度采集、AD转换、单片机译码显示等功能。单片机需要采集数据时&#xff0c;发出指令启动A/D转换器工作&#xff0c;ADC0832根…

Android 实现竖排文本(垂直方向显示)

Android 实现竖排文本-垂直方向显示 前言效果图代码实现方式一 Custom View1. 自定义视图 VerticalTextView2. 在xml布局文件中使用3. 设置文本内容 方式二 使用 TextView 的 rotation属性方式三 使用带有跨距文本的TextView1. 自定义视图 VerticalTextView2. 在xml布局文件中使…

【Windows系统】解决Intel 6代CPU安装win7系统过程中无法操作键盘鼠标的问题

问题 微软表示&#xff0c;从 2016 年 7 月 17 日起&#xff0c;新的 Intel、AMD 和Qualcomm 处理器将仅支持 Windows 10&#xff0c;不再支持 Windows 7 和 8.1。因此&#xff0c;Intel 6代以后的CPU因为没有USB驱动无法完成win7系统的安装。 下文核心思想是通过老毛桃PE系统…

云界洞见:移动云服务开启技术创新与问题解决的新篇章

一、什么是移动云 移动云以“央企保障、安全智慧、算网一体、属地服务”为品牌支撑&#xff0c;聚焦智能算力建设&#xff0c;打造一朵智能、智慧、安全可信可控的云&#xff0c;提供更优质的算力服务&#xff0c;引领云计算产业发展。 那么下面博主带领大家了解移动云的优势所…

关于c++的通过cin.get()维持黑框的思考

1.前言 由于本科没有学过c语言&#xff0c;研究生阶段接触c上手有点困难&#xff0c;今天遇到关于通过cin.get()来让黑框维持的原因。 2.思考 cin.get()维持黑框不消失的原因一言蔽之就是等待输入。等待键盘的输入内容并回车&#xff08;一般是回车&#xff09;后cin.get()才…

Plotly库利用滑块创建数据可视化

使用了Plotly库来创建一个数据可视化图表&#xff0c;并使用滑块来控制显示哪些数据 import plotly.graph_objects as go from plotly.subplots import make_subplots# 示例数据 x [1, 2, 3, 4, 5] y1 [1, 2, 3, 4, 5] y2 [5, 4, 3, 2, 1] y3 [2, 3, 1, 5, 4]# 创建子图 f…

Python vscode debug: Error while enumerating installed packages.解决

记录一个vscode python debug时出现的错误&#xff1a; 具体错误如下&#xff1a; E00000.030: Error while enumerating installed packages. Traceback (most recent call last): File “/root/.vscode-server/extensions/ms-python.debugpy-2024.0.0-linux-x64/bundled/lib…

Study--Oracle-03-Oracle19C--RAC集群部署

一、硬件信息及配套软件 1、硬件设置 RAC集群虚拟机&#xff1a;CPU:2C、内存&#xff1a;9G、操作系统&#xff1a;30G、数据库安装目录&#xff1a;100G 数据存储&#xff1a;50G &#xff08;10G*5&#xff09; 共享存储&#xff1a;2G &#xff08;1G*2&#xff09; 2…

基于 vuestic-ui 实战教程

1. 前言简介 Vuestic UI是一个基于开源Vue 3的UI框架。它是一个MIT许可的UI框架&#xff0c;提供了易于配置的现成前端组件&#xff0c;并加快了响应式和快速加载Web界面的开发。它最初于2021年5月由EpicMax发布&#xff0c;这就是今天的Vuestic UI。 官网地址请点击访问 体验…

【Linux安全】iptables防火墙(二)

目录 一.iptables规则的保存 1.保存规则 2.还原规则 3.保存为默认规则 二.SNAT的策略及应用 1.SNAT策略的典型应用环境 2.SNAT策略的原理 2.1.未进行SNAT转换后的情况 2.2.进行SNAT转换后的情况 3.SNAT策略的应用 3.1.前提条件 3.2.实现方法 三.DNAT策略及应用 1…

怎么查看项目中antd的版本

使用antd时&#xff0c;有在线参考资料&#xff0c;但是需要根据项目需要&#xff0c;选择对应版本的参考资料。 antd在线参考资料&#xff1a; 组件总览 - Ant Design 如何查看当前项目中antd的版本呢&#xff1f; 在项目的终端中输入&#xff1a; npm list antd antd官网选择…

庆余年第2季,带你走进怎样的世界?

《庆余年》第二季 演员阵容与幕后团队的新组合为我们带来了别样的观影体验 他的演技真的是在线&#xff0c;其实这剧本很难搞 该搞笑的时候要搞笑&#xff0c;但也不能一直在无厘头胡闹 所以题主说节奏拿捏的好我也很赞同 反观有其他几位演员控制力就差很多 特别是某一集…

STM32H743的FDCAN使用方法(1):STM32CubeMX初始化代码生成

0 工具准备 1.STM32CubeMX1 前言 本文介绍基于STM32CubeMX&#xff0c;使用stm32h743xi的对FDCAN2进行配置的方法。 2 初始化代码生成 2.1 选择FDCAN引脚 本例选择PB5、PB6作为FDCAN2的RX、TX引脚。 2.2 选择FDCAN时钟源 本例选择PLL2Q作为FDCAN时钟源&#xff0c;频率…

UDP的报文结构和注意事项

UDP协议是在传输层的协议。 UDP无连接&#xff0c;不可靠传输&#xff0c;面向数据报&#xff0c;全双工。 UDP的报文结构 学习网络协议&#xff0c;最主要的就是报文格式。 对于UDP来说&#xff0c;应用层的数据到达&#xff0c;UDP之后&#xff0c;就会给应用层的数据报前面…

服务器端口开放,服务器端口开放命令与方法的专业阐述

在计算机网络中&#xff0c;服务器端口的开放是确保网络通信畅通无阻的关键步骤。服务器端口是服务器与外部网络通信的入口&#xff0c;通过正确配置和开放相应的端口&#xff0c;可以实现各种网络服务和应用的功能。 一、命令与工具 在Linux系统中&#xff0c;常用的命令和工…

4. C++网络编程-TCP客户端的实现

TCP Client网络编程基本步骤 创建socket&#xff0c;指定使用TCP协议使用connect连接服务器使用recv/send接收/发送数据关闭socket TCP-connect连接请求 !man 2 connect #include <sys/types.h> /* See NOTES */ #include <sys/socket.h> int connect(int sock…

内网渗透(不出网上线CS)

目录 CS的概述 实验&#xff1a;不出网上线CS实验 一&#xff1a;给PC1种马 二&#xff1a;使用Beacon SMB去控制PC2。 三&#xff1a;将CS权限传递给MSF 四&#xff1a;将msf权限传递给CS CS的概述 cs是一款强大的控制windows木马的工具。是目前渗透中常使用的一个工具…