KKFileView結合vue多格式文件在線預覽功能實現(xiàn)

更新時間：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搭建，易上手和部署，可以進行二次開發(fā)和獨立部署，是一個很方便易使用的文件預覽項目。

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

??KKFileView結合vue多格式文件在線預覽??

通過Docker安裝KKFileView

拉取鏡像：

# 網絡環(huán)境方便訪問docker中央倉庫
docker pull keking/kkfileview:4.1.0
# 網絡環(huán)境不方便訪問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

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

瀏覽器訪問容器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.最后的結果如下

在這里插入圖片描述