欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3中各種類型文件進行預覽功能實例

 更新時間：2021年09月02日 12:03:06   作者：子壹  
在vue移動端項目中經(jīng)常遇到這樣的需求,對一些上傳的附件可以點擊之后在線預覽,所以下面這篇文章主要給大家介紹了關于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中this.$router.push()路由傳值和獲取的兩種常見方法匯總

    vue中this.$router.push()路由傳值和獲取的兩種常見方法匯總

    這篇文章主要介紹了vue中this.$router.push()路由傳值和獲取的兩種常見方法,本文結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2022-12-12
  • 詳解vue3.x頁面功能拆分方式

    詳解vue3.x頁面功能拆分方式

    本文主要介紹了vue3.x頁面功能拆分方式，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-05-05
  • vue中el-table實現(xiàn)可拖拽移動列和動態(tài)排序字段

    vue中el-table實現(xiàn)可拖拽移動列和動態(tài)排序字段

    最近公司需要做個項目,需要拖拽表格和自定義表格字段,本文主要介紹了vue中el-table實現(xiàn)可拖拽移動列和動態(tài)排序字段,具有一定吃參考價值,感興趣的可以了解一下
    2023-12-12
  • vue3基于script?setup語法$refs的使用

    vue3基于script?setup語法$refs的使用

    這篇文章主要介紹了vue3基于script?setup語法$refs的使用，<BR>?在用vue3開發(fā)項目的時候，需要調(diào)用子組件的方法，于是想著用$refs來實現(xiàn)，但是我是使用script?setup語法糖，原先vue2的語法已經(jīng)不適用了。下面我們一起進入文章看詳細內(nèi)容吧</P><P>
    2021-12-12
  • 如何提升vue.js中大型數(shù)據(jù)的性能

    如何提升vue.js中大型數(shù)據(jù)的性能

    這篇文章主要介紹了提高vue.js中大型數(shù)據(jù)的性能,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，,需要的朋友可以參考下
    2019-06-06
  • 詳解element-ui設置下拉選擇切換必填和非必填

    詳解element-ui設置下拉選擇切換必填和非必填

    這篇文章主要介紹了詳解element-ui設置下拉選擇切換必填和非必填，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2019-06-06
  • 淺析Vue3中的邏輯復用

    淺析Vue3中的邏輯復用

    這篇文章主要為大家詳細介紹了Vue3中邏輯復用的相關知識,文中的示例代碼簡潔易懂,對我們深入了解Vue3有一定的幫助,需要的小伙伴可以參考下
    2023-12-12
  • vue2創(chuàng)建高復用組件的方法示例

    vue2創(chuàng)建高復用組件的方法示例

    Vue2中的高復用組件通常是指那些設計得足夠通用,并能多次在項目中重復使用的組件,本文給大家詳細介紹了vue2創(chuàng)建高復用組件的方法示例,并通過代碼示例講解的非常詳細,需要的朋友可以參考下
    2024-07-07
  • vue3?中?computed?新用法示例小結

    vue3?中?computed?新用法示例小結

    這篇文章主要介紹?vue3?中?computed?的新用法，對比?vue2?中的寫法，讓您快速掌握?vue3?中?computed?的新用法，對函數(shù)式寫法，options?寫法相關知識感興趣的朋友一起看看吧
    2021-11-11
  • vue的diff算法知識點總結

    vue的diff算法知識點總結

    本篇文章給大家分享了關于vue的diff算法的相關知識點總結，有興趣的朋友參考學習下。
    2018-03-03

最新評論