目錄

• 前言
• 1.office文件型別的預覽
  
• 2.pdf型別的預覽
  
• 3. 圖片型別
  
• 4.視訊型別
  
• 5. 音訊型別
  
• 總結

前言

摸著石頭過河的滋味不好http://www.cppcns.com受啊，聽說大廠的大佬們都在忙著用3在升級專案，我也沒事湊一波熱鬧。身處某小廠還是不甘於折騰。新做一個專案，直接上vue3 ，頭腦發熱 ，可能有人不計後果，但是跌跌撞撞還是基本搞完了，那記錄一www.cppcns.com下吧

今天說一下開發過程中的某一個功能吧！反正耗費不少時間，先說說功能需求吧：在上傳檔案之後的檔案列表中能夠點選進行預覽，包含檔案媒體型別包括 圖片 、word excel等文件檔案、pdf、視訊、音訊 的預覽針對pc端

1.office文件型別的預覽

首先看到的是word excel 等文件檔案的預覽，針對改問題開始還是網上搜尋了一些方法，畢竟我這經驗甚少，有人推薦a標籤直接下載預覽，顯然不符合我們預期，有人推薦excel 使用sheet 但是我們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 所以理所當然的上來一跑就報錯也是理所應當的，果斷百度啊，百度告訴我說www.cppcns.com，這個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各種型別檔案預覽內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！