vue项目使用vue-pdf插件预览pdf文件

1、安装vue-pdf:npm install --save vue-pdf
2、使用
具体实现代码:pdfPreview.vue

<template><div class="container"><pdfref="pdf":src="pdfUrl":page="currentPage":rotate="pageRotate"class="pdf-box"@num-pages="pageCount = $event"@page-loaded="currentPage = $event"@loaded="loadPdfHandler"/><div class="tool-box"><el-buttontype="primary"circleicon="el-icon-caret-left"@click="changePdfPage(0)"/><span style="margin: 0 20px;">{{ currentPage }} / {{ pageCount }}</span><el-buttontype="primary"circleicon="el-icon-caret-right"@click="changePdfPage(1)"/><el-buttontype="primary"circleicon="el-icon-zoom-in"@click="scaleD()"/><el-buttontype="primary"circleicon="el-icon-zoom-out"@click="scaleX()"/><el-buttontype="primary"circleicon="el-icon-refresh-left"@click="counterClock()"/><el-buttontype="primary"circleicon="el-icon-refresh-right"@click="clock()"/></div></div>
</template><script>
import pdf from 'vue-pdf'
export default {name: 'PdfPreview',components: {pdf},props: {pdfUrl: {type: String,default: () => ''},sentData: {type: Object,default: () => {}}},data() {return {currentPage: 0, // pdf文件页码pageCount: 0, // pdf文件总页数scale: 100,pageRotate: 0,tempFileName: '',pdfContent: ''}},mounted() { },methods: {// pdf加载时loadPdfHandler(e) {ethis.currentPage = 1 // 加载的时候先加载第一页},// 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页changePdfPage(val) {if (val === 0 && this.currentPage > 1) {this.currentPage--}if (val === 1 && this.currentPage < this.pageCount) {this.currentPage++}},// 放大scaleD() {this.scale += 5this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%'},// 缩小scaleX() {if (this.scale === 100) {return}this.scale += -5this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%'},// 顺时针clock() {this.pageRotate += 90},// 逆时针counterClock() {this.pageRotate -= 90}}
}
</script><style lang="scss" scoped>
.container {position: relative;width: 100%;height: 100%;overflow: auto;img {position: absolute;right: 20px;bottom: 10px;width: 40px;cursor: pointer;}
}.pdf-box {width: 100%;height: calc(100% - 56px);overflow: scroll;
}.tool-box {position: absolute;bottom: 15px;left: 50%;margin-left: -164px;
}
</style>

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

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

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

相关文章

三种解密 HTTPS 流量的方法介绍

Web 安全是一项系统工程&#xff0c;任何细微疏忽都可能导致整个安全堡垒土崩瓦解。拿 HTTPS 来说&#xff0c;它的「内容加密、数据完整性、身份认证」三大安全保证&#xff0c;也会受到非法根证书、服务端配置错误、SSL 库漏洞、私钥被盗等等风险的影响。很多同学认为只要访问…

Debezium发布历史47

原文地址&#xff1a; https://debezium.io/blog/2019/02/13/debezium-0-9-1-final-released/ 欢迎关注留言&#xff0c;我是收集整理小能手&#xff0c;工具翻译&#xff0c;仅供参考&#xff0c;笔芯笔芯. Debezium 0.9.1.Final 发布 二月 13, 2019 作者&#xff1a; Gunna…

2024年PMP考试新考纲-【人员领域】真题解析(3)

今天华研荟继续为您分享PMP新考纲下的【人员People领域】近年真题&#xff0c;帮助大家举一反三&#xff0c;一次性通过2024年的PMP考试。 这两天有读者朋友和我探讨&#xff0c;做机构提供的模拟题是否有必要。华研荟的态度是&#xff1a;完全没必要&#xff0c;做模拟题是浪费…

Feign远程调用

Feign远程调用 Fegin的使用步骤如下&#xff1a; 1&#xff09;引入依赖 我们在order-service服务的pom文件中引入feign的依赖&#xff1a; <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-openfeign&…

嵌入式-stm32-基于HAL库的感应开关盖垃圾桶项目(开源)

嵌入式-stm32-感应开关盖垃圾桶项目&#xff08;开源&#xff09; 网盘资料 《嵌入式-stm32-基于HAL库的感应开关盖垃圾桶项目&#xff08;开源&#xff09;》 目录 一&#xff1a;项目概述 二&#xff1a;材料准备 三&#xff1a;细节分析&#xff08;重点&#xff09; 四&…

【CSS】浅学一下filter

目录 1、基本概念 2、用法 3、应用案例 更加智能的阴影效果&#xff1a; 元素、网页置灰 元素强调、高亮 毛玻璃效果 调整网页sepia 褐色值可以实现护眼效果 1、基本概念 CSS filter 属性将模糊或颜色偏移等图形效果&#xff08;对比度、亮度、饱和度、模糊等等&#…

机器人制作开源方案 | 清洁机器人

作者&#xff1a;胡志宇、白永康、颉志国、刘昭迅、王维浩 单位&#xff1a;北京石油化工学院 指导老师&#xff1a;陈亚、王殿军 1. 设计方案论证 1.1 清洁机器人方案选择 目前&#xff0c;市场上清洁机器人比比皆是&#xff0c;各大品牌之间的竞争也相当激烈&#xff0c;…

MongoDB快速实战与基本原理

MongoDB 介绍 什么是 MongoDB MongoDB 是一个文档数据库&#xff08;以 JSON 为数据模型&#xff09;&#xff0c;由 C 语言编写&#xff0c;旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。文档来自于“JSON Document”&#xff0c;并非我们一般理解的 PDF、WORD 文档…

【MySQL】数据库之MHA高可用

目录 一、MHA 1、什么是MHA 2、MHA 的组成 3、MHA的特点 4、MHA的工作原理 二、有哪些数据库集群高可用方案 三、实操&#xff1a;一主两从部署MHA 1、完成主从复制 步骤一&#xff1a;完成所有MySQL的配置文件修改 步骤二&#xff1a;完成所有MySQL的主从授权&#x…

三款红外接收二极管电路图

红外接收二极管电路图一&#xff1a; 如图所示&#xff0c;图是红外线遥控接收装置实例。红外线传感器有多种&#xff0c;这里选用光电二极管TPS604。工作原理简介如下&#xff1a;光电二极管TPS604接收到被调制的红外线的微弱信号&#xff0c;先经场效应晶体管VT1的前级放大&…

分布式系统的CAP理论详解

介绍 CP 系统是指在 CAP 理论中偏向于一致性&#xff08;Consistency&#xff09;和分区容错性&#xff08;Partition tolerance&#xff09;&#xff0c;牺牲了可用性&#xff08;Availability&#xff09;。在这样的系统中&#xff0c;一致性是非常重要的&#xff0c;即使在…

数据结构学习笔记——查找算法中的树形查找(B树、B+树)

目录 前言一、B树&#xff08;一&#xff09;B树的概念&#xff08;二&#xff09;B树的性质&#xff08;三&#xff09;B树的高度&#xff08;四&#xff09;B树的查找&#xff08;五&#xff09;B树的插入&#xff08;六&#xff09;B树的删除 二、B树&#xff08;一&#xf…

【linux】线程同步+基于BlockingQueue的生产者消费者模型

线程同步基于BlockingQueue的生产者消费者模型 1.线程同步2.生产者消费者模型3.基于BlockingQueue的生产者消费者模型 喜欢的点赞&#xff0c;收藏&#xff0c;关注一下把&#xff01; 1.线程同步 在线程互斥写了一份抢票的代码&#xff0c;我们发现虽然加锁解决了抢到负数票的…

Java重修第二天—学习”方法“

通过学习本篇文章可以掌握如下知识 1、方法的定义 2、方法在计算机中的执行流程。 3、方法使用时常见问题 4、Java中方法的参数传递机制 5、方法重载 1 方法是什么 方法是一种语法结构&#xff0c;它可以把一段代码实现的某种功能封装起来&#xff0c;以便重复利用。 方…

第二百四十五

我们在上一章回中介绍了"修改页面导航中遇到的问题"沉浸式状态样相关的内容&#xff0c;本章回中将介绍如何修改Avatar的大小.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们在正常使用CirCleAvatar组件时可以通过该组件的radius属性来修改它的…

目标检测-One Stage-YOLO v3

文章目录 前言一、YOLO v3的网络结构和流程二、YOLO v3的创新点总结 前言 根据前文目标检测-One Stage-YOLOv2可以看出YOLOv2的速度和精度都有相当程度的提升&#xff0c;但是精度仍较低&#xff0c;YOLO v3基于一些先进的结构和思想对YOLO v2做了一些改进。 提示&#xff1a;…

突破技术边界:R与jsonlite库探秘www.snapchat.com的数据之旅

概述 Snapchat是一款流行的社交媒体应用&#xff0c;它允许用户发送和接收带有滤镜和贴纸的照片和视频&#xff0c;以及创建和观看故事和发现内容。Snapchat的数据是非常有价值的&#xff0c;因为它可以反映用户的行为、偏好和趋势。然而&#xff0c;Snapchat的数据并不容易获…

【LMM 009】MiniGPT-4:使用 Vicuna 增强视觉语言理解能力的多模态大模型

论文描述&#xff1a;MiniGPT-4: Enhancing Vision-Language Understanding with Advanced Large Language Models 论文作者&#xff1a;Deyao Zhu∗ Jun Chen∗ Xiaoqian Shen Xiang Li Mohamed Elhoseiny 作者单位&#xff1a;King Abdullah University of Science and Techn…

亚信安慧AntDB数据库:企业核心业务系统数据库升级改造的可靠之选

在近期召开的“2023年国有企业应用场景发布会”上&#xff0c;亚信安慧公司的核心数据库产品AntDB闪耀登场&#xff0c;技术总监北陌先生针对企业核心业务系统数据库升级改造的关键议题发表了深度分享。他从研发、工程实施和运维管理三个维度细致剖析了当前企业在进行数据库升级…

Python - 深夜数据结构与算法之 DP - 进阶

目录 一.引言 二.经典算法实战 1.House-Robber [198] 2.House-Robber-2 [213] 3.Best-Sell-Time [121] 4.Best-Sell-Time-2 [122] 5.Best-Sell-Time-3 [123] 6.Best-Sell-Time-4 [188] 7.Best-Sell-Time-Coldown [309] 8. Best-Sell-Time-Fee [714] 三.总结 一.引言…