vue3中如何實(shí)現(xiàn)各種類(lèi)型文件進(jìn)行預(yù)覽功能

這篇文章將為大家詳細(xì)講解有關(guān)vue3中如何實(shí)現(xiàn)各種類(lèi)型文件進(jìn)行預(yù)覽功能，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

1.office文檔類(lèi)型的預(yù)覽

首先看到的是word excel 等文檔文件的預(yù)覽，針對(duì)改問(wèn)題開(kāi)始還是網(wǎng)上搜尋了一些方法，畢竟我這經(jīng)驗(yàn)甚少，有人推薦a標(biāo)簽直接下載預(yù)覽，顯然不符合我們預(yù)期，有人推薦excel 使用sheetjs 但是我們word 也需要另找他法，最終我還是確定了使用微軟的在線預(yù)覽，使用iframe作為載體進(jìn)行

<iframe  frameborder="0" 
:src="'https://view.officeapps.live.com/op/view.aspx?src=' + fileUrl" width='100%'>
</iframe>

需要考慮的是我當(dāng)時(shí)element-plus的dialog 彈框里，iframe不能很好的撐開(kāi)父元素所以又填充一些代碼。并且加載過(guò)程比較慢，由于時(shí)間原因就沒(méi)有考慮進(jìn)行其他方法的嘗試

2.pdf類(lèi)型的預(yù)覽

對(duì)于這種pdf的預(yù)覽，感覺(jué)好解決啊，使用原來(lái)使用過(guò)的 npm install pdfjs-dist ，開(kāi)搞就完了，萬(wàn)萬(wàn)沒(méi)想到我這個(gè)目前還沒(méi)有支持vue3 所以理所當(dāng)然的上來(lái)一跑就報(bào)錯(cuò)也是理所應(yīng)當(dāng)?shù)?，果斷百度啊，百度告訴我說(shuō)，這個(gè)pdfjs-dist vue3 不支持吶還，換個(gè)方法吧，我***，用你說(shuō) 我想找解決辦法，主角來(lái)了下載之后將build和web文件夾放在我們的public文件下 做一下引用，注意自己的地址是不是對(duì)，我放在了一個(gè)embed 里

  data.pdfUrl = './pdf/web/viewer.html?file='+type;  // 線上預(yù)覽

 <embed  :src="pdfUrl" />

3. 圖片類(lèi)型

我覺(jué)這種類(lèi)型 ，我們都不必多說(shuō)，直接上代碼就可以了，處理一下url

<div v-if="showImg == true" class="dialog-body-content-base-style">
    <el-image
        class="image-preview"
        :src="imgUrl"
        />
</div>

4.視頻類(lèi)型

對(duì)于視頻類(lèi)型本來(lái)是想直接使用 video元素直接放里的但是我是一個(gè)有追求的程序猿，追求自己的理想，沒(méi)事就是折騰么，開(kāi)始使用vue-video-palyer 進(jìn)行視頻預(yù)覽，但是就是天不遂愿，完vue3 中報(bào)錯(cuò) ，說(shuō)白了又來(lái)了寶貝，沒(méi)支持vue3 唄？ 沒(méi)事我習(xí)慣了，推薦大家用一波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. 音頻類(lèi)型

吃了上邊的虧，終于還是決定使用audio 這個(gè)標(biāo)簽了，直接使用就完了。

<audio :src="musicUrl" controls></audio>

關(guān)于“vue3中如何實(shí)現(xiàn)各種類(lèi)型文件進(jìn)行預(yù)覽功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。