vue3中各种类型文件进行预览功能实例

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

  data.pdfUrl = './pdf/web/viewer.html?file='+type;  // 线上预览

 <embed  :src="pdfUrl" style="width: 100%; "/>

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

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>

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