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预览多格式文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

前端项目中如何使用百度地图api(含实例)
当我们遇到定位展示的时候会出现使用地图展示的需求,下面这篇文章主要给大家介绍了关于前端项目中如何使用百度地图api(含实例)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-06-06
vue中的锚点定位问题
这篇文章主要介绍了vue中的锚点定位问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
1分钟Vue实现右键菜单
今天给大家分享的是，如何在最短的时候内实现右键菜单。高效实现需求，避免重复造轮子。感兴趣的可以了解一下
2021-10-10
vue3实现按钮权限管理的项目实践
在做后台管理系统时,经常会有权限管理的功能,本文主要介绍了vue3实现按钮权限管理的项目实践,具有一定的参考价值,感兴趣的可以了解一下
2023-08-08
Vue3+Vite 环境变量和模式配置详解(推荐)
在Vue 3中,你可以通过 import.meta.env 访问环境变量,这些变量可以在你的应用代码中使用,但它们通常用于配置不应该硬编码在代码中的值,这篇文章主要介绍了Vue3+Vite 环境变量和模式配置详解,需要的朋友可以参考下
2024-12-12
node+vue前后端分离实现登录时使用图片验证码功能
这篇文章主要介绍了node+vue前后端分离实现登录时使用图片验证码,记录前端使用验证码登录的过程，后端用的是node.js，关键模块是svg-captcha，结合实例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-11-11
详解Vue改变数组中对象的属性不重新渲染View的解决方案
这篇文章主要介绍了详解Vue改变数组中对象的属性不重新渲染View的解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
vue实现树形菜单效果
这篇文章主要为大家详细介绍了vue实现树形菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-03-03
vue中$nextTick的用法讲解
今天小编就为大家分享一篇关于vue中$nextTick的用法讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-01-01
详解vue使用Echarts画柱状图
这篇文章主要为大家介绍了vue使用Echarts画柱状图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-01-01