vue3实现在element Dialog 对话框中预览pdf文件

燕哥学前端

已于 2023-10-18 14:45:27 修改

阅读量2.4k

点赞数

分类专栏：前端学习新手村文章标签： pdf vue.js javascript

于 2023-10-18 14:44:26 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_56733569/article/details/133905212

版权

本文介绍如何在Vue3项目中利用embed标签实现在Element UI的Dialog对话框中预览PDF文件。embed标签适用于插入多媒体内容，通过设置src、type、width和height等属性实现PDF预览功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近有一个需求就是点击按钮在弹框中去预览pdf文件，于是发现了一个HTML中比较重要的标签：embed，前面说的需求就可以用这个标签来实现，一起来学习一下吧。

embed标签是HTML中的一个非常重要的标签，它可以在你的网页上插入各种类型的多媒体内容，例如交互式应用程序，PDF，Flash，音频和视频文件等。

下面是embed标签的一些主要属性：

src：此属性定义要嵌入的资源的URL。

type：此属性定义资源的MIME类型。MIME类型是一种识别数据类型的方式，如
‘image/jpeg’、‘video/mpeg’ 等。

width 和 height：这些属性定义嵌入对象的尺寸，单位为像素。

pluginspage：此属性指向能播放嵌入内容的插件的下载位置。

下面直接看具体应用吧，我是把它单独拎出页面写的，所以直接在需要用到的组件里引入，想要传什么值自行添加即可

<template>
  <!-- 弹出框 -->
  <el-dialog
    title="pdf预览.pdf"
    v-model="openPdf"
    @close="onClose"
    :close-on-click-modal="false"
    width="1050px"
  >
  <!-- 预览pdf文件

最低0.47元/天解锁文章