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,一经查实,立即删除!

相关文章

pytest框架的代码如何用vscode进行debug

{"version": "0.2.0","configurations": [{"name": "Python: Run My Module", // 配置名称&#xff0c;将在调试配置下拉列表中显示"type": "debugpy", // 调试类型&#xff0c;这里是Python"requ…

二元关系表示

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

常用字体映射字典

表格形式 英文字体名称中文字体名称SimSun宋体SimHei黑体KaiTi楷体FangSong仿宋YouYuan幼圆LiSu隶书NSimSun新宋体SimSun-ExtB宋体-ExtBFangSong_GB2312仿宋_GB2312KaiTi_GB2312楷体_GB2312Microsoft YaHei微软雅黑Microsoft JhengHei微软正黑体STXihei华文细黑STKaiti华文楷体…

手机版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根…

Hive 变量定义与引用

文章目录 1.背景2.Hive 变量命名空间查看变量设置变量引用变量 参考文献 1.背景 在书写 Hive SQL 时&#xff0c;有时需要将重复出现的值从 SQL 分离出来&#xff0c;以变量的方式表示和引用。 设置变量和引用变量可以带来以下几个好处&#xff1a; 简化查询语句&#xff1a;…

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

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

AI学习指南数学工具篇-凸优化基础知识凸函数

AI学习指南数学工具篇-凸优化基础知识凸函数 引言 在凸优化过程中&#xff0c;凸函数是一个非常重要的概念&#xff0c;它在机器学习、深度学习和优化算法中都有广泛的应用。凸函数具有很多独特的性质&#xff0c;能够帮助我们更好地理解优化问题并且设计高效的优化算法。本文…

【Golang】Golang获取Gin框架PostForm上传的文件

文章目录 前言一、函数解释二、代码实现三、总结 前言 在Web开发中&#xff0c;文件上传是一项常见的功能。例如&#xff0c;用户可能需要上传头像、文档或其他类型的文件。在Go语言的Gin框架中&#xff0c;我们可以很方便地处理文件上传。在这篇博客中&#xff0c;我将解释如…

怎样理解 Vue 的单项数据流

Vue 的单项数据流是一个核心概念&#xff0c;它指的是在 Vue 组件中&#xff0c;数据的流动方向是单向的&#xff0c;从父组件流向子组件。以下是关于 Vue 单项数据流的详细理解&#xff1a; 数据流的方向&#xff1a; Vue 中的数据流动是单向的&#xff0c;即数据只能从父组件…

中国交通信息科技集团有限公司(中交信科)java开发工程师-机试题目/颂大技术面试总结/理工数传 软件开发一面二面面试总结/武汉智能视觉信息技术有限公司/高级

武汉智能视觉信息技术有限公司/高级 如果解决jvm内存溢出如果解决亿级别的数据导出&#xff0c;有没有其他的方案可以解决呢索引的原理工作中用了哪些索引提高了多少的速度线程池的创建方法--解释new ThreadPool的其他参数以及四大拒绝策略分布式使用用到了哪些模式xxl-job的原…

pillow学习4

ImageChops 模块 在 Pillow 库的内置模块 ImageChops 中包含了多个用于实现图片合成的函数。这些合成 功能是通过计算通道中像素值的方式来实现的。其主要用于制作特效、合成图片等操作。 常用的内置函数如下所示&#xff1a; &#xff08;1&#xff09;相加函数 add()&#xf…

【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…

java —— 类与方法

一、访问修饰符 在类和方法中&#xff0c;均可使用访问修饰符以锁定该类或方法的被访问权限。访问修饰符有四种&#xff1a; &#xff08;一&#xff09;public 同一个项目中&#xff0c;对所有的类可见。 &#xff08;二&#xff09;protected 同一个项目中&#xff0c;对…

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…