kkfileview代理配置,Vue对接kkfileview实现图片word、excel、pdf预览

embedded/2024/12/26 18:14:35/

kkfileview部署

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

这个是官网部署网址,这里推荐大家使用docker镜像部署,因为我是直接找运维部署的,所以这里我就不多说明了,主要说下nginx代理配置,以及接入kkfileview实现图片预览和Office系列的预览。

这里可以给大家提供一个银河麒麟v10上面部署的方案,建议使用如下方法的话去找经验丰富的运维,不过对于运维来说比较简单,对于Java开发,就我个人来说难死了。
因为我们服务器是银河麒麟v10,国产芯片(好像是鲲鹏),并且不能连接外网,所以只能离线部署,试了官网上的好多方案,包括一些博客的方案,都不太行,一开始我自己部署,最后实在没办法,找了运维工程师,他也不行,最后实在没办法我们找了一台同样的可以连接外网的服务器,然后把docker镜像下载下来,然后把镜像文件下载下来,传到这台服务器上,可以用。(有同样场景的同仁可以试试这个办法)

kkfileview代理配置

配置文件

Nginx代理的时候因为没有根目录了,我们只能代理到二级目录下:首先在启动的时候需要给kkfileview添加二级目录,我这里是使用docker启动的,可以使用--volume参数把配置文件映射出来,然后修改配置文件,这里找的运维,我是真不会,我是菜鸡。
首先添加二级路径:
在这里插入图片描述
下面base.url也要写上二级路径,前面的就是代理出去的外网地址:
在这里插入图片描述

主要就是上面这两个位置,如果不这么写的话,后面不同格式文件预览会出问题
别的配置大家就根据自己业务需要调整就可以了

Nginx代理

http {# 文件预览(这里是内网ip地址)upstream preview-web {server 192.168.134.23:8012;}server {#文件预览(这里需要带上二级路径)location /preview {proxy_pass http://preview-web/preview;proxy_redirect default;proxy_set_header Host $host;proxy_set_header Referer $http_referer;proxy_set_header Cookie $http_cookie;proxy_set_header X-Real-Ip $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}}
}

配置完之后如果生产环境建议使用命令测试启动下,不然搞挂了就尴尬了

# 测试命令
nginx -t
# 启动命令
nginx -s reload

配置完之后可以外网访问下看能不能看到

wordexcelpdf_52">Vue对接kkfileview实现图片wordexcel、pdf预览

对接方式大家参考官方的给出的对接方案就行:
我这里是使用的最新的4.x的版本,所以使用最新的

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-base64@3.6.0/base64.min.js"></script>var url = 'http://127.0.0.1:8080/file/test.txt'; //要预览文件的访问地址
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url)));

图片的预览

到那时配置了代理之后会出现一些问题,首先:
如果我们的图片是放在文件服务器上或者服务器本地,然后使用nginx代理出来的,或者第三方的oss
那么直接按照上述的方式去接入预览就好了

vue的话需要下载 js-base64

npm install js-base64

随后在需要接入预览的Vue文件中引入:

previewFile : 是文件的url 地址(外网的地址)
vitePreviewUrl: http://127.0.0.1:8012/preview/onlinePreview?url=

<template>
<iframev-if="previewFile.toLowerCase().includes('.png') ||previewFile.toLowerCase().includes('.jpg') ||previewFile.toLowerCase().includes('.jpeg')"class="preview_file"frameborder="0"width="100%":src="vitePreviewUrl + encodeURIComponent(Base64.encode(previewFile))"></iframe>
</template>
<script setup lang="ts">
import { Base64 } from 'js-base64'
</script>

图片的话这样就可以了因为图片是直接请求的图片的url地址返回的的图片展示出来的
在这里插入图片描述

Office系列预览

使用上述的方法对图片的支持是没有问题的,但是对Office系列的文件不太行,首先Office系列的文件他会缓存到kkfileview的本地,然后分解成一张张图片随后返回过来实现预览,所以kkfileview会在服务器去发送请求下载这个office文件,因为我们的文件也是上传在内网一台服务器上的minio文件服务器中,并且内外网做了隔离,只开放一个端口,使用nginx代理出去,所以内网服务器上部署的kkfileview直接访问文件的url地址他是找不到文件的,kkfileview部署在内网,文件url是外网地址,内外网隔离的情况下,就需要把文件url预览地址转化为内网的预览地址,让他去下载缓存。
因此预览office文件的时候需要将文件外网的url地址转化成内网的url地址:

<!--    其他文件    --><iframev-elseclass="preview_file"frameborder="0"width="100%":src="vitePreviewUrl +encodeURIComponent(Base64.encode(previewFile.replace(viteOutUrl, viteInnerUrl)))"></iframe>

使用replace函数直接替换成内网地址,给大家展示一个原理图,没有去研究源码,但是根据请求返回结果和接入时候出现的各种问题,应该大差不差,有问题,大家即时指正。
图片预览
在这里插入图片描述
在这里插入图片描述
文件预览
在这里插入图片描述
在这里插入图片描述

后续有时间研究研究源码可能会更好,如果有不对的地方请大家指正。


http://www.ppmy.cn/embedded/148960.html

相关文章

WPF的右键菜单项目引入DLL和DllImport特性引入DLL文件的异同点

在WPF&#xff08;Windows Presentation Foundation&#xff09;应用程序中&#xff0c;引用DLL&#xff08;Dynamic Link Library&#xff09;可以通过不同的方式实现&#xff0c;其中包括使用右键菜单添加引用和使用代码中的 DllImport 特性引入。 第一种&#xff1a;右键项…

【落羽的落羽 C语言篇】动态内存管理·上

文章目录 一、动态内存管理是什么二、动态内存管理相关函数1. malloc2. free3. calloc4. realloc 三、柔性数组1. 概念2. 使用 一、动态内存管理是什么 我们之前已经知道&#xff0c;定义变量就是申请一块空间&#xff0c;int a;就是申请四个字节的空间&#xff0c;char arr[2…

【Rust自学】7.1. Package、Crate和定义Module

喜欢的话别忘了点赞、收藏加关注哦&#xff0c;对接下来的教程有兴趣的可以关注专栏。谢谢喵&#xff01;(&#xff65;ω&#xff65;) 7.1.1. Rust的代码组织 代码组织主要包括&#xff1a; 那些细节可以对外暴露&#xff0c;而哪些细节是私有的在作用域内哪些名称有效… …

ML-Agents:训练配置文件(一)

注&#xff1a;本文章为官方文档翻译&#xff0c;如有侵权行为请联系作者删除 Training Configuration File - Unity ML-Agents Toolkit–原文链接 ML-Agents&#xff1a;训练配置文件&#xff08;一&#xff09; ML-Agents&#xff1a;训练配置文件&#xff08;二&#xff09;…

对 MYSQL 架构的了解

MySQL 是一种广泛使用的关系型数据库管理系统&#xff0c;其架构主要包括以下几个关键部分&#xff1a; 一、连接层 客户端连接管理&#xff1a;MySQL 服务器可以同时处理多个客户端的连接请求。当客户端应用程序&#xff08;如使用 Java、Python 等语言编写的程序&#xff09;…

Llama 3 模型系列解析(一)

目录 1. 引言 1.1 Llama 3 的简介 1.2 性能评估 1.3 开源计划 1.4 多模态扩展 ps 1. 缩放法则 2. 超额训练&#xff08;Over-training&#xff09; 3. 计算训练预算 4. 如何逐步估算和确定最优模型&#xff1f; 2. 概述 2.1 Llama 3 语言模型开发两个主要阶段 2.2…

云手机+YouTube:改变通信世界的划时代技术

随着科技的不断进步&#xff0c;手机作为人们生活中不可或缺的工具&#xff0c;也在不断地更新换代。近年来&#xff0c;一个名为“油管云手机”的全新产品正在引起广泛的关注和讨论。作为一个运用最新科技实现的新型手机&#xff0c;它在通信领域带来了全新的体验和革命性的变…

从汽车企业案例看仓网规划的关键步骤(视频版)

大家好&#xff0c;欢迎收看本期视频。本期内容将以汽车行业为例&#xff0c;带您了解仓库选址和仓网规划如何解决实际问题&#xff0c;以及需要注意的关键步骤。 案例描述 国内某大型汽车企业目前在全国范围内拥有十多个生产厂地和近千家供应商。这些供应商分布在多个地理区…