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&…

6-Docker Compose-tomcat application(指定官方镜像)

1.创建docker-compose.yml文件,添加如下内容并保存 vim docker-compose.yml [root@centos79 ~]# cat docker-compose.yml #yml文件 version: 3 #版本号,默认为3 services:tomcat-ztj: #定…

Module-Federation[微前端]

Module-Federation 微前端简介我们为什么没有延续使用【乾坤】使用Module-Federation 优/缺EMP 优EMP 缺图解DEMO详解`Tips:` [文件资源](https://download.csdn.net/download/alnorthword/88699315)微前端简介 微前端是借鉴了微服务的理念,将一个庞大的应用拆分成多个独立灵活…

嵌入式-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…

vue3中集成sass实现全局scss样式变量

一、安装sass npm i sass 二&#xff0c;在style/variable.scss创建一个variable.scss文件 // 给项目提供的scss全局变量 $mycolor:red; 三、在vite.config.ts文件配置如下: export default defineConfig({ plugins: [ vue(), // scss全局变量的一个配置 css: {…

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

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

Embree使用指南(无SYCL)

IntelEmbree是由Intel开发的高性能光线跟踪库&#xff0c;以Apache 2.0许可证的开源形式发布。 Embree的目标是图形应用程序开发人员&#xff0c;以提高逼真照片渲染应用程序的性能。Embree针对生产渲染进行了优化&#xff0c;重点关注非相干光线性能、高质量的加速结构构建、丰…

分布式系统的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…

每日一练:LeeCode-316. 去除重复字母【字符串操作+单调栈+布尔型变量】

本文是力扣LeeCode-316. 去除重复字母 学习与理解过程&#xff0c;本文仅做学习之用&#xff0c;对本题感兴趣的小伙伴可以出门左拐LeeCode。 给你一个字符串 s &#xff0c;请你去除字符串中重复的字母&#xff0c;使得每个字母只出现一次。需保证 返回结果的字典序最小&#…

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

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

C++ 中的耗时计算函数

#include <time.h>int clock_gettime (clockid_t clock_id, struct timespec *tp) 获取当前 clock_id 的时钟值并存储在 tp 中。 其中 tp 是一个 timespec 结构体&#xff0c;在 time.h 头文件中定义&#xff1a; #include <time.h>:struct timespec {time_t t…

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

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