湘潭做网站 去磐石网络,网页和网站有什么分别,wordpress网站变灰,企业网站建站元素最近有一个需求就是点击按钮在弹框中去预览pdf文件#xff0c;于是发现了一个HTML中比较重要的标签#xff1a;embed#xff0c;前面说的需求就可以用这个标签来实现#xff0c;一起来学习一下吧。 embed标签是HTML中的一个非常重要的标签#xff0c;它可以在你的网页上插… 最近有一个需求就是点击按钮在弹框中去预览pdf文件于是发现了一个HTML中比较重要的标签embed前面说的需求就可以用这个标签来实现一起来学习一下吧。 embed标签是HTML中的一个非常重要的标签它可以在你的网页上插入各种类型的多媒体内容例如交互式应用程序PDFFlash音频和视频文件等。 下面是embed标签的一些主要属性 src此属性定义要嵌入的资源的URL。type此属性定义资源的MIME类型。MIME类型是一种识别数据类型的方式如 ‘image/jpeg’、‘video/mpeg’ 等。width 和 height这些属性定义嵌入对象的尺寸单位为像素。pluginspage此属性指向能播放嵌入内容的插件的下载位置。 下面直接看具体应用吧我是把它单独拎出页面写的所以直接在需要用到的组件里引入想要传什么值自行添加即可
template!-- 弹出框 --el-dialogtitlepdf预览.pdfv-modelopenPdfcloseonClose:close-on-click-modalfalsewidth1050px!-- 预览pdf文件 --embedsrchttps://www.latex-project.org/help/documentation/usrguide.pdftypeapplication/pdfwidth1010pxheight600px//el-dialog
/templatescript setup nameshowPdf
import { ref, reactive, computed, watch, getCurrentInstance } from vue;
const { proxy } getCurrentInstance();
// 是否打开弹窗
const openPdf ref(false);const props defineProps({openPdf:{type:Boolean},uuid:{type:String},title:{type:String}
})
// 关闭弹窗
const onClose (){openPdf.value false;
}
/scriptstyle langscss scoped/style templatebutton clickopenDetail打开弹窗/button!-- 弹窗 --showPdf v-modelopenPdf :uuiduuid/showPdf/div
/templatescript setup
import { ref} from vue;
import showPdf from /views/showPdf.vue // 引入前面写好的弹窗组件const uuid ref(null);
const openPdf ref(false);/**打开pdf弹窗 */
const openDetail() {openPdf.value true;
};
/scriptstyle langscss scoped/style
效果图
