第一种方式通过 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预览视频的时候，关闭弹窗的时候也应该把视频的值清空。否者视频会一直播放的 插件预览的缺点 插件预览只能够预览一种类型。而不能够预览多种类型的资源。 在预览的时候，最好是需要判断一下。符合条件的类型才能够进行预览。
