vue3中各種類型文件進行預覽功能實例
前言
摸著石頭過河的滋味不好受啊，聽說大廠的大佬們都在忙著用vue3在升級項目，我也沒事湊一波熱鬧。身處某小廠還是不甘于折騰。新做一個項目，直接上vue3 ，頭腦發(fā)熱 ，可能有人不計后果，但是跌跌撞撞還是基本搞完了，那記錄一下吧
今天說一下開發(fā)過程中的某一個功能吧！反正耗費不少時間，先說說功能需求吧：在上傳文件之后的文件列表中能夠點擊進行預覽，包含文件媒體類型包括 圖片 、word excel等文檔文件、pdf、視頻、音頻 的預覽針對pc端
1.office文檔類型的預覽
首先看到的是word excel 等文檔文件的預覽，針對改問題開始還是網(wǎng)上搜尋了一些方法，畢竟我這經(jīng)驗甚少，有人推薦a標簽直接下載預覽，顯然不符合我們預期，有人推薦excel 使用sheetjs 但是我們word 也需要另找他法，最終我還是確定了使用微軟的在線預覽，使用iframe作為載體進行
<iframe frameborder="0" :src="'https://view.officeapps.live.com/op/view.aspx?src=' + fileUrl" width='100%'> </iframe>
需要考慮的是我當時element-plus的dialog 彈框里，iframe不能很好的撐開父元素所以又填充一些代碼。并且加載過程比較慢，由于時間原因就沒有考慮進行其他方法的嘗試
2.pdf類型的預覽
對于這種pdf的預覽，感覺好解決啊，使用原來使用過的 npm install pdfjs-dist ，開搞就完了，萬萬沒想到我這個目前還沒有支持vue3 所以理所當然的上來一跑就報錯也是理所應當?shù)?，果斷百度啊，百度告訴我說，這個pdfjs-dist vue3 不支持吶還，換個方法吧，我***，用你說 我想找解決辦法，主角來了下載之后將build和web文件夾放在我們的public文件下 做一下引用，注意自己的地址是不是對，我放在了一個embed 里
data.pdfUrl = './pdf/web/viewer.html?file='+type; // 線上預覽
<embed :src="pdfUrl" style="width: 100%; "/>
3. 圖片類型
我覺這種類型 ，我們都不必多說，直接上代碼就可以了，處理一下url
<div v-if="showImg == true" class="dialog-body-content-base-style">
<el-image
class="image-preview"
:src="imgUrl"
/>
</div>
4.視頻類型
對于視頻類型本來是想直接使用 video元素直接放里的但是我是一個有追求的程序猿，追求自己的理想，沒事就是折騰么，開始使用vue-video-palyer 進行視頻預覽，但是就是天不遂愿，完vue3 中報錯 ，說白了又來了寶貝，沒支持vue3 唄？ 沒事我習慣了，推薦大家用一波vue-vam-video
npm install vue-vam-video -s
import VamVideo from "vue-vam-video";
components: {
VamVideo,
},
setup(props,context) {
const data = reactive({
videoOption: {
properties: {
poster: '',
src:"",
preload: "auto",
// loop: "loop",
// autoplay:"autoplay",
// muted:true
},
videoStyle: {
width: "100%",
// height: "600px",
},
controlsConfig: {
fullScreenTit:"全屏",
EscfullScreenTit:"退出全屏",
speedTit:"倍速",
yinliangTit:"音量",
jingyinTit:"靜音",
playTit:"播放",
pauseTit:"暫停",
fullScreen:true,
speed:true,
listen:true
}
},
})
}
<vam-video
:properties="videoOption.properties"
:videoStyle="videoOption.videoStyle"
:controlsConfig="videoOption.controlsConfig"
@play="playVideo"
@canplay="canplayVideo"
@pause="pauseVideo"
></vam-video>
5. 音頻類型
吃了上邊的虧，終于還是決定使用audio 這個標簽了，直接使用就完了。
<audio :src="musicUrl" controls></audio>
綜上建議大家考慮周全 ，像大廠的大佬們有自己的組件庫，絲毫不擔心，但是小廠的我們還是謹慎一點。 希望vue更多的組件庫、功能庫更加完善，畢竟站在巨人肩膀上是方便的。沒事多研究源碼 。。。。。。
總結
到此這篇關于vue3中各種類型文件進行預覽功能的文章就介紹到這了,更多相關vue3各種類型文件預覽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
- vue中如何實現(xiàn)pdf文件預覽的方法
- Vue中如何實現(xiàn)在線預覽word文件、excel文件
- vue實現(xiàn)在線預覽pdf文件和下載（pdf.js）
- vue使用pdf.js預覽pdf文件的方法
- vue3如何實現(xiàn)PDF文件在線預覽功能
- vue預覽 pdf、word、xls、ppt、txt文件的實現(xiàn)方法
- Vue3 + Vue-PDF 實現(xiàn)PDF 文件在線預覽實戰(zhàn)
- Vue實現(xiàn)在線預覽pdf文件功能（利用pdf.js/iframe/embed）
- Vue實現(xiàn)預覽docx/xlsx/pdf等類型文件功能
- vue中實現(xiàn)支持txt,docx,xlsx,mp4格式文件預覽功能(純前端)
相關文章
這篇文章主要介紹了vue arco.design錨點Anchor使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
越來越多的人在用Vue，剛開始接觸vue的話常接觸的指令就幾個，統(tǒng)一歸納一下。感興趣的朋友跟隨小編一起看看吧2018-11-11
本篇文章主要介紹了VueJs 將接口用webpack代理到本地的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
本文分步驟給大家介紹vue給不同環(huán)境配置不同打包命令的方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-08-08
這篇文章主要為大家詳細介紹了Vue概念及常見命令，介紹了vue.js聲明式渲染、雙向綁定及常用指令,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
Vue中@click.stop與@click.prevent、@click.native使用
這篇文章主要介紹了Vue中@click.stop與@click.prevent、@click.native使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
vue3.0 的 Composition API 的使用示例
這篇文章主要介紹了vue3.0 的 Composition API 的使用示例，幫助大家更好的理解和學習vue，感興趣的朋友可以了解下2020-10-10
解決vue2+vue-router動態(tài)路由添加及路由刷新后消失問題
這篇文章主要介紹了解決vue2+vue-router動態(tài)路由添加及路由刷新后消失問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要給大家介紹了關于vue3中如何使用codemirror6增加代碼提示功能的相關資料,Codemirror是一個不錯的Web代碼編輯庫,可以方便簡單的集成,需要的朋友可以參考下2023-08-08
在vue框架開發(fā)中,有時候我們需要對元素的樣式進行動態(tài)控制,比如tab按鈕的切換,下面這篇文章主要給大家介紹了關于Vue動態(tài)綁定Class的幾種常用方式,需要的朋友可以參考下2023-03-03