前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >KKFileView结合vue多格式文件在线预览

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

作者头像
知识浅谈
发布2024-05-25 08:44:16
660
发布2024-05-25 08:44:16
举报
文章被收录于专栏:分享学习分享学习

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

  1. 通过Docker安装KKFileView

拉取镜像:

代码语言:javascript
复制
# 网络环境方便访问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

运行容器

代码语言:javascript
复制
docker run -it -p 8012:8012 keking/kkfileview:4.1.0

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

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

  1. Vue3中引入KKFileView

首先在项目中安装js-base64

代码语言:javascript
复制
npm install --save js-base64

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

代码语言:javascript
复制
<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.最后的结果如下

在这里插入图片描述
在这里插入图片描述

KKFileView官网:https://kkview.cn/zh-cn 如有更复杂的需求,请到官网查看。

🍚总结

大功告成,撒花致谢🎆🎇🌟,关注我不迷路,带你起飞带你富。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-04-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 🍚总结
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档