Vue3 kkfileview 的使用

官网链接

1. 宝塔安装

1. 在宝塔的docker应用商店中安装kkfileview
   

2. 在Docker----本地镜像中使用----命令创建容器

docker run -it -p 8012:8012 keking/kkfileview:latest

3. 修改docker部署的kkfile配置
   链接
4. 此时应该可以通过服务器地址的8012端口访问到kkfileview
   
5. 修改nginx配置文件
   增加以下代码：

    location ^~/preview/ {proxy_pass http://192.168.1.123:8012/;}

2. vue中的代码

• 不配置nginx也可以直接使用，只要kkfileview安装成功，使用：http://192.168.1.123:8012/onlinePreview?url=Base64(url)就可以预览文件了

<template><iframe :src="previewUrl" style="width: 100%; height: 50vh; border: none"></iframe>
</template><script lang="ts" setup>// 需安装 js-base64 库import { Base64 } from "js-base64";const previewUrl = ref<String>('');const viewUrl = 'http://192.168.1.123/preview/onlinePreview';let url = encodeURIComponent(Base64.encode(record.dataStorage));previewUrl.value = `${viewUrl}?url=` + url;// 或者直接在新窗口打开// window.open(previewUrl, '_blank');
</script>