vue在线查看pdf文件

news/2024/4/15 5:12:08/文章来源:https://blog.csdn.net/weixin_48811255/article/details/136498187

1.引入组件

npm install --save vue-pdf

2、pdf组件页面模板

<template><div class="scrollBox" ><el-dialog   :visible.sync="open" :top="1"  width="50%" append-to-body><div slot="title"><el-page-header @back="open =false" content="简历"></el-page-header></div><pdf v-for="item in numPages" :key="item" :src="pdfSrc" :page="item" ref="pdf"></pdf></el-dialog></div>
</template><script>
import pdf from 'vue-pdf'
export default {//你的页面路由名称name: "Resume",components: {pdf},data() {return {pdfSrc:null,//简历地址numPages: null, // pdf 总页数open:false,//开关};},methods: {show(url){//调用界面传过来简历的地址this.pdfSrc = url;// 计算pdf页码总数this.getNumPages();//打开弹出框this.open = true;},getNumPages() {let loadingTask = pdf.createLoadingTask(this.pdfSrc)loadingTask.promise.then(pdf => {this.numPages = pdf.numPages;}).catch(err => {console.error('pdf 加载失败', err);})},}
};
</script>

3、引入组件到你的页面


<!-- 引入组件,ref:调用组件方法用  -->
<Resume ref="showResume"  :title="resumeTitle"></Resume>
import Resumefrom "@/views/business/common/resume";//调用方法
toResume(resumeUrl){//resumeUrl简历地址this.$refs.showResume.show(resumeUrl);},</script>

效果:

在这里插入图片描述

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

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

相关文章

EdgeX Foundry - 导出数据到 MQTT 服务

文章目录 一、概述1.安装说明2.安装 EMQX3.MQTTX 工具 二、安装部署1.docker-comepse2.修改配置3.启动 EdgeX Foundry4.访问 UI4.1. consul4.2. EdgeX Console 5.测试 EdgeX Foundry # EdgeX Foundryhttps://iothub.org.cn/docs/edgex/ https://iothub.org.cn/docs/edgex/devi…

Java8 CompletableFuture异步编程-入门篇

&#x1f3f7;️个人主页&#xff1a;牵着猫散步的鼠鼠 &#x1f3f7;️系列专栏&#xff1a;Java全栈-专栏 &#x1f3f7;️个人学习笔记&#xff0c;若有缺误&#xff0c;欢迎评论区指正 目录 前言 1、Future vs CompletableFuture 1.1 准备工作 1.2 Future 的局限性 …

小程序API能力集成指南——画布API汇总(四)

CanvasContext canvas 组件的绘图上下文。 方法如下&#xff08;3&#xff09;&#xff1a; scale CanvasContext.scale CanvasContext.scale(number scaleWidth, number scaleHeight) 功能描述 在调用后&#xff0c;之后创建的路径其横纵坐标会被缩放。多次调用倍数会相…

什么是VR虚拟现实|虚拟科技博物馆|VR设备购买

虚拟现实&#xff08;Virtual Reality&#xff0c;简称VR&#xff09;是一种通过计算机技术模拟出的一种全新的人机交互方式。它可以通过专门的设备&#xff08;如头戴式显示器&#xff09;将用户带入一个计算机生成的虚拟环境之中&#xff0c;使用户能够与这个虚拟环境进行交互…

基于“xxx” Androidx平台的驱动及系统开发 之 触摸板篇

目录 一、基于全志 A133 Android10平台&#xff0c;适配1366x768 - ilitek2511触摸1、原理图分析2、驱动移植与适配3、补丁和资源文件 二、基于瑞芯微 RK3566 Android11平台&#xff0c;适配GT9XX触摸1、原理图分析2、补丁及资源文件 三、遇到的问题与解决1、基于amlogic Andro…

Sodinokibi勒索病毒最新变种,勒索巨额赎金

前言 Sodinokibi勒索病毒在国内首次被发现于2019年4月份&#xff0c;2019年5月24日首次在意大利被发现&#xff0c;在意大利被发现使用RDP攻击的方式进行传播感染&#xff0c;这款病毒被称为GandCrab勒索病毒的接班人&#xff0c;在短短几个月的时间内&#xff0c;已经在全球大…

leetcode 3068. 最大节点价值之和【树形dp】

原题链接&#xff1a;3068. 最大节点价值之和 题目描述&#xff1a; 给你一棵 n 个节点的 无向 树&#xff0c;节点从 0 到 n - 1 编号。树以长度为 n - 1 下标从 0 开始的二维整数数组 edges 的形式给你&#xff0c;其中 edges[i] [ui, vi] 表示树中节点 ui 和 vi 之间有一…

Sentinel 面试题及答案整理,最新面试题

Sentinel的流量控制规则有哪些&#xff0c;各自的作用是什么&#xff1f; Sentinel的流量控制规则主要包括以下几种&#xff1a; 1、QPS&#xff08;每秒查询量&#xff09;限流&#xff1a; 限制资源每秒的请求次数&#xff0c;适用于控制高频访问。 2、线程数限流&#xf…

Linux系统——SElinux

目录 前言 一、SELinux 的作用及权限管理机制 1.SELinux 的作用 1.1DAC 1.2MAC 1.3DAC 和 MAC 的对比 2.SELinux 基本概念 2.1主体&#xff08;Subject&#xff09; 2.2对象&#xff08;Object&#xff09; 2.3政策和规则&#xff08;Policy & Rule&#xff09;…

数据结构/C++:二叉搜索树

数据结构/C&#xff1a;二叉搜索树 概念模拟实现结构分析插入中序遍历查找删除析构函数拷贝构造赋值重载递归查找递归插入递归删除 总代码展示 概念 二叉搜索树&#xff08;BST - Binary Search Tree&#xff09;是一种特殊的二叉树&#xff0c;每个顶点最多可以有两个子节点。…

scrapy 爬虫:多线程爬取去微博热搜排行榜数据信息,进入详情页面拿取第一条微博信息,保存到本地text文件、保存到excel

如果想要保存到excel中可以看我的这个爬虫 使用Scrapy 框架开启多进程爬取贝壳网数据保存到excel文件中&#xff0c;包括分页数据、详情页数据&#xff0c;新手保护期快来看&#xff01;&#xff01;仅供学习参考&#xff0c;别乱搞_爬取贝壳成交数据c端用户登录-CSDN博客 最终…

如何修炼成“神医”——《OceanBase诊断系列》之一

本系列是基于OcenaBase 开发工程师在工作中的一些诊断经验&#xff0c;也欢迎大家分享相关经验。 1. 关于神医的故事 扁鹊&#xff0c;中国古代第一个被正史记载的医生&#xff0c;他的成才之路非常传奇。年轻时&#xff0c;扁鹊是一家客栈的主管。有一位名叫长桑君的客人来到…

YOLOv8基础必需运用【目标检测、分割、姿势估计、跟踪和分类任务】

文章目录 前言1、环境安装2.1安装torch相关库2.2 获取yolov8最新版本&#xff0c;并安装依赖 3. 如何使用模型用于各种CV任务方式一&#xff1a;命令行形式方式二&#xff1a;python代码形式示例3.1 目标检测任务实现代码运行结果检测视频代码 3.2 分割任务实现代码运行效果分割…

蓝桥杯前端Web赛道-收集帛书碎片

蓝桥杯前端Web赛道-收集帛书碎片 题目链接&#xff1a;1.收集帛书碎片 - 蓝桥云课 (lanqiao.cn) 题目要求&#xff1a; 其实通过这个目标我们可以看出其实就是筛选出数组中多余的元素&#xff0c;那么我们可以通过includes来判断&#xff0c;当前数组是否已经拥有过这个碎片…

Maven入门(作用,安装配置,Idea基础maven,Maven依赖,Maven构建项目)【详解】

目录 一. Maven的作用 1.依赖管理 2.统一项目结构 3.项目构建 二.Maven安装配置 1. Maven的仓库类型 2 加载jar的顺序 3. Maven安装配置 4.安装Maven 5.配置仓库 三.idea集成maven 1.给当前project集成maven 2.给新建project集成maven 3.创建maven项目 4.pom…

【C语言】glibc

一、获取源码 apt install glibc-source 在Debian系统中&#xff0c;通过apt install glibc-source命令安装的glibc源码通常会被放置在/usr/src/glibc目录下。安装完成后&#xff0c;可能需要解压缩该源码包。以下是解压缩源码包的步骤&#xff1a; 1. 打开终端。 2. 切换到源…

图片在div完全显示

效果图&#xff1a; html代码&#xff1a; <div class"container" style" display: flex;width: 550px;height: 180px;"><div class"box" style" color: red; background-color:blue; width: 50%;"></div><div …

机器学习-面经(part7、无监督学习)

机器学习面经系列的其他部分如下所示&#xff1a; 机器学习-面经&#xff08;part1&#xff09; 机器学习-面经(part2)-交叉验证、超参数优化、评价指标等内容 机器学习-面经(part3)-正则化、特征工程面试问题与解答合集机器学习-面经(part4)-决策树共5000字的面试问题与解答…

Rust泛型与trait特性,模仿接口的实现

泛型是一个编程语言不可或缺的机制。 C 语言中用"模板"来实现泛型&#xff0c;而 C 语言中没有泛型的机制&#xff0c;这也导致 C 语言难以构建类型复杂的工程。 泛型机制是编程语言用于表达类型抽象的机制&#xff0c;一般用于功能确定、数据类型待定的类&#xf…

备战蓝桥杯————二分查找(二)

引言 在上一篇博客中&#xff0c;我们深入探讨了二分搜索算法及其在寻找数组左侧边界的应用。二分搜索作为一种高效的查找方法&#xff0c;其核心思想在于通过不断缩小搜索范围来定位目标值。在本文中&#xff0c;我们将继续这一主题&#xff0c;不仅会回顾二分搜索的基本原理&…