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

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

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

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

  1. src:此属性定义要嵌入的资源的URL。
  2. type:此属性定义资源的MIME类型。MIME类型是一种识别数据类型的方式,如
    ‘image/jpeg’、‘video/mpeg’ 等。
  3. width 和 height:这些属性定义嵌入对象的尺寸,单位为像素。
  4. pluginspage:此属性指向能播放嵌入内容的插件的下载位置。

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

<template><!-- 弹出框 --><el-dialogtitle="pdf预览.pdf"v-model="openPdf"@close="onClose":close-on-click-modal="false"width="1050px"><!-- 预览pdf文件 --><embedsrc="https://www.latex-project.org/help/documentation/usrguide.pdf"type="application/pdf"width="1010px"height="600px"/></el-dialog>
</template><script setup name="showPdf">
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;
}
</script><style lang="scss" scoped></style>

<template><button @click="openDetail">打开弹窗</button><!-- 弹窗 --><showPdf v-model="openPdf" :uuid="uuid"></showPdf></div>
</template><script 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;
};
</script><style lang="scss" scoped></style>

效果图:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/113226.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

车规MCU开发工具之Vector DaVinci Configurator执行arxml合并操作

环境 Step1 导入要合并的arxml 、 Step 2 比较、合并过程 <完>

xlive.dll下载安装方法分享,教你快速修复xlive.dll文件

在运行某些应用程序或游戏时&#xff0c;你可能会遭遇到"xlive.dll缺失"错误提示&#xff0c;这可能导致程序无法正常运行。本文将向你介绍一些可行的解决方法教你下载xlive.dll文件&#xff0c;并详细阐述xlive.dll是什么文件以及导致其缺失的原因。 一.理解"x…

C++ 智能指针常用总结

C 智能指针常用总结 文章目录 C 智能指针常用总结1. 写在对前面2. why 智能指针3. what 智能指针3.1 unique_ptr3.2 shared_ptr3.3 weak_ptr 3. how 指针指针3.1 unique_ptr3.1.1 创建3.1.2 成员函数 3.2 shared_ptr3.2.1创建3.2.2 成员对象 3.3 weak_ptr 4. 碎碎念5.参考资料 …

移动设备管理对企业IT 安全的增强

移动设备管理 &#xff08;MDM&#xff09; 是通过定义策略和部署安全控制&#xff08;如移动应用程序管理、移动内容管理和条件 Exchange 访问&#xff09;来管理移动设备的过程。 完整的MDM解决方案可以管理在Android&#xff0c;iOS&#xff0c;Windows&#xff0c;macOS&a…

Spring Boot配置多个Kafka数据源

一、配置文件 application.properties配置文件如下 #kafka多数据源配置 #kafka数据源一&#xff0c;日志审计推送 spring.kafka.one.bootstrap-servers172.19.12.109:32182 spring.kafka.one.producer.retries0 spring.kafka.one.producer.properties.max.block.ms5000 #kafk…

Elasticsearch 8.X 分词插件版本更新不及时解决方案

1、关于 Elasticsearch 8.X IK 分词插件相关问题 球友在 ElasticSearch 版本选型问题中提及&#xff1a;如果要使用ik插件&#xff0c;是不是就使用目前最新的IK对应elasticsearch的版本“8.8.2”&#xff1f; https://github.com/medcl/elasticsearch-analysis-ik/releases/ta…

python异常及解决方法汇总

文章目录 1、flask异常&#xff1a;TypeError: __init__() got an unexpected keyword argument unbound_message参考文献 1、flask异常&#xff1a;TypeError: init() got an unexpected keyword argument ‘unbound_message’ 解决方法&#xff1a; pip install Flask2.1.3…

怎么获取开源的商城源码

前言 开源的商城源码是指可以自由获取、使用和修改的商城程序代码&#xff0c;通常由开源社区或个人开发者贡献和维护。有许多开源的商城源码可以用于建立自己的商城网站&#xff0c;这篇文章将为您介绍如何找到这些源码。 GitHub搜索 GitHub是一个国际知名的开源代码托管平…

K8s 概念及组件

K8s 的全称为Kubernetes&#xff0c;是一种开源的容器编排平台&#xff0c;用于自动化部署以及扩展和管理容器化的应用程序&#xff0c;它提供了一种容器编排和管理的方式&#xff0c;可以帮助开发人员更轻松的管理容器化的应用程序&#xff0c;并且提供了一种跨多个主机的自动…

Jmeter性能测试 —— jmeter之使用ServerAgent监控服务器

ServerAgent 性能测试时我们关注的重要指标是&#xff1a;并发用户数&#xff0c;TPS&#xff0c;请求成功率&#xff0c;响应时间&#xff0c;服务器的CPU&#xff0c;memory&#xff0c; I/O disk等。Jmeter的聚合报告可以查看并发数、吞吐量、请求成功率、响应时间等&#…

Reasoning with Language Model Prompting: A Survey

本文是LLM系列的文章&#xff0c;针对《Reasoning with Language Model Prompting: A Survey》的翻译。 语言模型提示推理&#xff1a;综述 摘要1 引言2 前言3 方法分类4 比较和讨论5 基准与资源6 未来方向7 结论与视角 摘要 推理作为解决复杂问题的基本能力&#xff0c;可以…

ERR_PNPM_LINKING_FAILED Error: EPERM: operation not permitted, rename

webstorm终端pnpm报错  ERR_PNPM_LINKING_FAILED  Error: EPERM: operation not permitted, rename ’ 报错原因&#xff1a;powershell权限不够 解决办法&#xff1a;提升权限/在文件打开Powershell安装依赖

发现一款非常好用的学术GPT,可形成知识库,并分析论文,根据观点生成文字

发现一款非常好用的学术GPT&#xff0c;支持CHATGPT3.5交互、论文分析与生成&#xff0c;目前作者并未全面推广&#xff0c;仅在小圈子里使用&#xff0c;可以保证后端api的使用稳定性&#xff0c;不会出现大量用户共享gpt 服务&#xff0c;导致gpt调用超时的情况。 使用方法&a…

java经典面试题总结

1.请简述Java的继承&#xff0c;重写和多态的概念和运用 继承是一种Java中重要的面向对象编程方式&#xff0c;它允许一个类从另一个类继承某些属性和方法&#xff0c;在这种关系下&#xff0c;子类可以重写父类的方法&#xff0c;从而实现不同的行为。 多态是继承实现的一种关…

关系数据库-postgresql-基础

文章目录 介绍linux下安装postgresql源码安装navicat连接 介绍 Postgresql官网开源的关系型数据库&#xff1b; linux下安装 Ubuntu下可以使用apt包管理器安装&#xff1b;参考地址CentOS下可以使用yum包管理器安装&#xff1b;OpenSuse下可以使用zypper包管理器安装&#xf…

基于Python3的Scapy构造DNS报文

一&#xff1a;DNS协议 DNS&#xff08;Domain Name System&#xff09;协议是计算机网络中的一种基础协议&#xff0c;它用于将域名&#xff08;如www.baidu.com&#xff09;转换为IP地址&#xff08;如192.168.0.1&#xff09;&#xff0c;从而实现计算机之间的通信。 DNS 分…

React基础: 项目创建 JSX 基础语法 React基础的组件使用 useState状态 基础样式控制

01 React 文章目录 01 React一、React是什么1、React的优势 二、React开发环境搭建1、创建项目2、运行项目3、项目的目录结构 三、JSX基础1、什么是 JSX代码示例&#xff1a; 2、JSX使用场景2.1代码示例&#xff1a; 3、JSX中实现列表渲染4、JSX - 实现基本的条件渲染5、JSX - …

喜讯!持安科技入选2023年北京市知识产权试点单位!

近日&#xff0c;北京市知识产权局发布了“2023年度北京市知识产权试点示范单位及2020年度北京市知识产权试点示范单位复审通过名单”名单。 经过严格的初审、形式审核和专家评审&#xff0c;北京持安科技有限公司入选“2023年北京市知识产权试点单位”。 北京市知识产权试点示…

并发性Socket通信源码(基于linux环境下多线程)

服务器端&#xff1a;server.c 1 #include <stdio.h>2 #include <stdlib.h>3 #include <unistd.h>4 #include <string.h>5 #include <arpa/inet.h>6 #include <pthread.h>7 void* working(void *arg);8 //信息结构体9 struct sockinfo10 …

《数据结构、算法与应用C++语言描述》-队列的应用-图元识别问题

《数据结构、算法与应用C语言描述》-队列的应用-图元识别问题 图元识别 问题描述 数字化图像是一个 mxm 的像素矩阵。在单色图像中&#xff0c;每一个像素要么为0&#xff0c;要么为 1。值为0的像素表示图像的背景。值为1的像素表示图元上的一个点&#xff0c;称其为图元像素…