KKFileView结合vue多格式文件在线预览

知识浅谈

发布于 2024-05-25 08:44:16

22000

代码可运行

文章被收录于专栏：分享学习分享学习

运行总次数：0

代码可运行

🤞KKFileView结合vue多格式文件在线预览🤞

通过Docker安装KKFileView

拉取镜像：

# 网络环境方便访问docker中央仓库
docker pull keking/kkfileview:4.1.0

# 网络环境不方便访问docker中央仓库
wget https://kkview.cn/resource/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

运行过程中可能会出现错误，只需要再重新运行一下就可以了。

浏览器访问容器8012端口 http://127.0.0.1:8012 即可看到项目演示用首页。

Vue3中引入KKFileView

首先在项目中安装js-base64

npm install --save js-base64

然后在使用的页面中编写代码

<template>
    <div>
       <iframe :src="pageUrl" width="100%" height="800px" class="file"></iframe>
    </div>
</template>
<script setup>
    import { Base64 } from 'js-base64';
    //网上找的一张图片，注意这个地址如果KKfileview不是运行在本地，不要传本地的图片地址，因为localhost只能本地的才能访问
    const url = "https://pic3.zhimg.com/80/v2-8267bf0fb306b975d77a298c32f4653e_1440w.webp"
    const pageUrl = 'http://82.157.53.229:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url));
</script>

3.最后的结果如下