KKFileView結(jié)合vue多格式文件在線預(yù)覽功能實(shí)現(xiàn)
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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3自定義指令實(shí)現(xiàn)按鈕防抖示例詳解
這篇文章主要為大家介紹了vue3自定義指令實(shí)現(xiàn)按鈕防抖示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要為大家介紹了TDesign在vitest的實(shí)踐示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Vue文件如何代替?zhèn)鹘y(tǒng)的HTML文件
隨著前端工程化的不斷推進(jìn),傳統(tǒng)的HTML、CSS、JavaScript三者分離的開(kāi)發(fā)模式逐漸顯露出一些不足之處,尤其是在構(gòu)建復(fù)雜的單頁(yè)應(yīng)用（SPA）時(shí),Vue.js作為一個(gè)現(xiàn)代化的前端框架,提供了多種工具和技術(shù)來(lái)簡(jiǎn)化開(kāi)發(fā)流程,本文將探討.vue文件是如何替代傳統(tǒng)HTML文件的角色2024-10-10
vue實(shí)現(xiàn)的雙向數(shù)據(jù)綁定操作示例
這篇文章主要介紹了vue實(shí)現(xiàn)的雙向數(shù)據(jù)綁定操作,結(jié)合完整實(shí)例形式較為詳細(xì)的分析了vue.js進(jìn)行數(shù)據(jù)雙向綁定操作的常見(jiàn)實(shí)現(xiàn)方法與相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
EasyPlayer.js是集播放http-flv,?hls,?websocket?于一身的H5視頻直播/視頻點(diǎn)播播放器,?使用簡(jiǎn)單,?功能強(qiáng)大，下面大家就跟隨小編一起學(xué)習(xí)一下它的具體使用吧2023-08-08
在現(xiàn)代前端開(kāi)發(fā)中,項(xiàng)目通常需要在不同的環(huán)境中運(yùn)行,例如開(kāi)發(fā)環(huán)境、測(cè)試環(huán)境和生產(chǎn)環(huán)境,每個(gè)環(huán)境可能需要不同的配置,通過(guò)使用?.env?文件,可以方便地管理這些環(huán)境變量,避免硬編碼配置,本文給大家介紹了Vue3項(xiàng)目中env文件的配置指南,需要的朋友可以參考下2025-03-03
Vue.js@2.6.10更新內(nèi)置錯(cuò)誤處機(jī)制Fundebug同步支持相應(yīng)錯(cuò)誤監(jiān)控
這篇文章主要介紹了Vue.js@2.6.10更新內(nèi)置錯(cuò)誤處機(jī)制，F(xiàn)undebug同步支持相應(yīng)錯(cuò)誤監(jiān)控 ,需要的朋友可以參考下2019-05-05
Vue導(dǎo)入excel文件的兩種方式(form表單和el-upload)
最近開(kāi)發(fā)遇到一個(gè)點(diǎn)擊導(dǎo)入按鈕讓excel文件數(shù)據(jù)導(dǎo)入的需求,下面這篇文章主要給大家介紹了關(guān)于Vue導(dǎo)入excel文件的兩種方式,分別是form表單和el-upload兩種方法,需要的朋友可以參考下2022-11-11
如何在vue項(xiàng)目中使用UEditor--plus
UEditor是由百度web前端研發(fā)部開(kāi)發(fā)的所見(jiàn)即所得的開(kāi)源富文本編輯器，這篇文章主要介紹了如何在vue項(xiàng)目中使用UEditor--plus?,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了使用Vant完成Dialog彈框案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11