0
点赞
收藏
分享

微信扫一扫

Spark 运行时对哪些数据会做缓存?

王老师说 2024-12-22 阅读 4

kkfileview部署

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

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

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

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

Vue对接kkfileview实现图片word、excel、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文件中引入:

<template>
<iframe
        v-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>

Office系列预览

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

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

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

举报

相关推荐

0 条评论