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
配置完之后可以外网访问下看能不能看到
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文件中引入：
previewFile : 是文件的url 地址（外网的地址）
vitePreviewUrl: http://127.0.0.1:8012/preview/onlinePreview?url=
<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>
图片的话这样就可以了因为图片是直接请求的图片的url地址返回的的图片展示出来的
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函数直接替换成内网地址，给大家展示一个原理图，没有去研究源码，但是根据请求返回结果和接入时候出现的各种问题，应该大差不差，有问题，大家即时指正。
图片预览
文件预览
后续有时间研究研究源码可能会更好，如果有不对的地方请大家指正。
