脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue预览多格式文件

KKFileView结合vue多格式文件在线预览功能实现

 更新时间：2024年02月03日 11:30:28   作者：知识浅谈  
kkFileView是git的开源在线文件预览项目，这篇文章主要介绍了KKFileView结合vue多格式文件在线预览功能，本文给大家介绍的非常详细,需要的朋友可以参考下

kkFileView是git的开源在线文件预览项目 支持格式：doc、docx、ppt、pptx、xls、xlsx、zip、rar、mp4、mp3以及众多类文本如txt、html、xml、java、properties、sql、js、md、json、conf、ini、vue、php、py、bat、gitignore 官方演示：https://file.keking.cn/index 官方文档：https://kkfileview.keking.cn/zh-cn/docs/home.html 该项目使用流行的spring boot搭建，易上手和部署，可以进行二次开发和独立部署，是一个很方便易使用的文件预览项目。

源码下载
gitee下载地址：https://gitee.com/kekingcn/file-online-preview

🤞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.最后的结果如下

在这里插入图片描述

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

🍚总结

到此这篇关于KKFileView结合vue多格式文件在线预览功能实现的文章就介绍到这了,更多相关vue预览多格式文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue3自定义指令实现按钮防抖示例详解

    vue3自定义指令实现按钮防抖示例详解

    这篇文章主要为大家介绍了vue3自定义指令实现按钮防抖示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-02-02
  • TDesign在vitest的实践示例详解

    TDesign在vitest的实践示例详解

    这篇文章主要为大家介绍了TDesign在vitest的实践示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • Vue文件如何代替传统的HTML文件

    Vue文件如何代替传统的HTML文件

    随着前端工程化的不断推进,传统的HTML、CSS、JavaScript三者分离的开发模式逐渐显露出一些不足之处,尤其是在构建复杂的单页应用（SPA）时,Vue.js作为一个现代化的前端框架,提供了多种工具和技术来简化开发流程,本文将探讨.vue文件是如何替代传统HTML文件的角色
    2024-10-10
  • vue实现的双向数据绑定操作示例

    vue实现的双向数据绑定操作示例

    这篇文章主要介绍了vue实现的双向数据绑定操作,结合完整实例形式较为详细的分析了vue.js进行数据双向绑定操作的常见实现方法与相关操作技巧,需要的朋友可以参考下
    2018-12-12
  • Vue2中easyplayer的使用教程详解

    Vue2中easyplayer的使用教程详解

    EasyPlayer.js是集播放http-flv, hls, websocket 于一身的H5视频直播/视频点播播放器, 使用简单, 功能强大，下面大家就跟随小编一起学习一下它的具体使用吧
    2023-08-08
  • Vue3项目中env文件的配置和使用指南

    Vue3项目中env文件的配置和使用指南

    在现代前端开发中,项目通常需要在不同的环境中运行,例如开发环境、测试环境和生产环境,每个环境可能需要不同的配置,通过使用 .env 文件,可以方便地管理这些环境变量,避免硬编码配置,本文给大家介绍了Vue3项目中env文件的配置指南,需要的朋友可以参考下
    2025-03-03
  • Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控

    Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控

    这篇文章主要介绍了Vue.js@2.6.10更新内置错误处机制，Fundebug同步支持相应错误监控 ,需要的朋友可以参考下
    2019-05-05
  • Vue导入excel文件的两种方式(form表单和el-upload)

    Vue导入excel文件的两种方式(form表单和el-upload)

    最近开发遇到一个点击导入按钮让excel文件数据导入的需求,下面这篇文章主要给大家介绍了关于Vue导入excel文件的两种方式,分别是form表单和el-upload两种方法,需要的朋友可以参考下
    2022-11-11
  • 如何在vue项目中使用UEditor--plus

    如何在vue项目中使用UEditor--plus

    UEditor是由百度web前端研发部开发的所见即所得的开源富文本编辑器，这篇文章主要介绍了如何在vue项目中使用UEditor--plus ,需要的朋友可以参考下
    2022-08-08
  • 使用Vant完成Dialog弹框案例

    使用Vant完成Dialog弹框案例

    这篇文章主要介绍了使用Vant完成Dialog弹框案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11

最新评论