iframe 在线预览pdf、word、excel、ppt、txt、图片、视频

第一种方式通过 iframe 在线预览 pdf,word,excel,ppt,txt,图片,视频

<template>
    <el-button  @click="openHandler">预览</el-button>
    <el-dialog @close="closeHandler" v-model="maskObj.flag" title="预览">
        <iframe  sandbox="allow-scripts allow-top-navigation allow-same-origin allow-popups"
            :src="maskObj.url"
            frameborder="0"
            style=" z-index: 1000;height:560px;width:100%">
        </iframe>
    </el-dialog>
</template>
<script lang="ts" setup>
import {shallowReactive } from 'vue'
let maskObj = shallowReactive({
    flag: false,
    url:''
})
const openHandler = () => {
    maskObj.url = '', //你的地址
    maskObj.flag = true;
    // 在预览的时候，可以判断一个文件的类型，不符合要求的类型不支持预览。
    // 在预览视频的时候，关闭弹窗的时候也应该把视频的值清空。否者视频会一直播放的
}
const closeHandler = () => {
    maskObj.url =''//清空值
    maskObj.flag = false;
}
</script>

预览word

预览视频

通过插件预览

如果通过插件预览就需要安装对应的插件。
vue-pdf 可以实现对pdf的预览。

vue-pdf预览pdf

<template>
    <el-dialog title="预览" :visible.sync="viewVisible" width="100%" height="100%" :before-close='closeDialog'>
        <div class="pdf" v-show="fileType === 'pdf'">
            <pdf :src="pdfsrc"></pdf>
        </div>
    </el-dialog>
</template>
<script>
// 引入刚才下载的 pdf
import pdf from 'vue-pdf'
export default {
    components: {
        pdf
    },
    data() {
        yuming: "你的url",  //
        viewVisible: false, // 弹框隐藏
        fileType: 'pdf', // 文件类型
        pdfsrc: '',  // 文件地址
    },
    created() {
        // 有时PDF文件地址会出现跨域的情况,最好先处理一下
        this.pdfsrc = pdf.createLoadingTask(this.pdfsrc)
    },
    methods: {
        handleEdit(index, row) {
            //console.log(row.wjYsmc)
            if (!/\.(pdf|PDF)$/.test(row.wjYsmc)) {
                window.open(
                    "https://view.officeapps.live.com/op/view.aspx?src=" + this.yuming + "/anli?id=" + row.id,
                    "_blank"
                );
                return false;
            } else {
                let url = this.yuming + "/anli?id=" + row.id
                this.viewVisible = true
                this.pdfsrc = url
            }
        },
        closeDialog(done) {
            done();
        },
    }
}
</script>

个人认为

目前来说，通过iframe来预览的形式会更加好一些。
在 iframe预览视频的时候，关闭弹窗的时候也应该把视频的值清空。否者视频会一直播放的
插件预览的缺点
插件预览只能够预览一种类型。而不能够预览多种类型的资源。
在预览的时候，最好是需要判断一下。符合条件的类型才能够进行预览。