快捷導(dǎo)航

KKFileView結(jié)合vue多格式文件在線預(yù)覽功能實(shí)現(xiàn)

更新時(shí)間：2024年02月03日 11:30:28 作者：知識(shí)淺談

kkFileView是git的開(kāi)源在線文件預(yù)覽項(xiàng)目，這篇文章主要介紹了KKFileView結(jié)合vue多格式文件在線預(yù)覽功能，本文給大家介紹的非常詳細(xì),需要的朋友可以參考下

kkFileView是git的開(kāi)源在線文件預(yù)覽項(xiàng)目支持格式：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 該項(xiàng)目使用流行的spring boot搭建，易上手和部署，可以進(jìn)行二次開(kāi)發(fā)和獨(dú)立部署，是一個(gè)很方便易使用的文件預(yù)覽項(xiàng)目。

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

??KKFileView結(jié)合vue多格式文件在線預(yù)覽??

通過(guò)Docker安裝KKFileView

拉取鏡像：

# 網(wǎng)絡(luò)環(huán)境方便訪問(wèn)docker中央倉(cāng)庫(kù)
docker pull keking/kkfileview:4.1.0
# 網(wǎng)絡(luò)環(huán)境不方便訪問(wèn)docker中央倉(cāng)庫(kù)
wget https://kkview.cn/resource/kkFileView-4.1.0-docker.tar
docker load -i kkFileView-4.1.0-docker.tar

運(yùn)行容器

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

運(yùn)行過(guò)程中可能會(huì)出現(xiàn)錯(cuò)誤，只需要再重新運(yùn)行一下就可以了。

瀏覽器訪問(wèn)容器8012端口 http://127.0.0.1:8012 即可看到項(xiàng)目演示用首頁(yè)。

Vue3中引入KKFileView

首先在項(xiàng)目中安裝js-base64

npm install --save js-base64

然后在使用的頁(yè)面中編寫代碼

<template>
    <div>
       <iframe :src="pageUrl" width="100%" height="800px" class="file"></iframe>
    </div>
</template>
<script setup>
    import { Base64 } from 'js-base64';
    //網(wǎng)上找的一張圖片，注意這個(gè)地址如果KKfileview不是運(yùn)行在本地，不要傳本地的圖片地址，因?yàn)閘ocalhost只能本地的才能訪問(wèn)
    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.最后的結(jié)果如下

在這里插入圖片描述

KKFileView官網(wǎng)：https://kkview.cn/zh-cn 如有更復(fù)雜的需求，請(qǐng)到官網(wǎng)查看。

??總結(jié)

到此這篇關(guān)于KKFileView結(jié)合vue多格式文件在線預(yù)覽功能實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue預(yù)覽多格式文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: