vue-pdf在vue框架中的使用
在components目录下新建PdfViewer/index.vue
vue-pdf版本为4.3.0
<template><div :id="containerId" v-if="hasProps" class="container"><div class="right-btn"><div class="pageNum"><input v-model.number="currentPage" type="number" class="inputNumber" @input="inputEvent()"> / {{pageCount}}</div><div @click="changePdfPage('first')" class="turn">首页</div><div @click="changePdfPage('pre')" class="turn-btn" :style="currentPage===1?'cursor: not-allowed;':''">上一页</div><div @click="changePdfPage('next')" class="turn-btn" :style="currentPage===pageCount?'cursor: not-allowed;':''">下一页</div><div @click="changePdfPage('last')" class="turn">尾页</div><div @click="scaleUp()" class="turn-btn">放大</div><div @click="scaleDown()" class="turn-btn">缩小</div><div @click="rotate()" class="turn-btn">旋转</div><div @click="downPDF()" class="turn" v-if="isShowDownloadBtn">下载</div></div><div class="pdfArea"><pdf :src="src" :ref="pdfRef" :page="currentPage" @num-pages="pageCount=$event" @progress="loadedRatio = $event" @page-loaded="currentPage=$event" @loaded="loadPdfHandler" @link-clicked="currentPage = $event" style="display: inline-block;width:100%" /></div></div>
</template><script>
import pdf from 'vue-pdf'export default {name: "pdfViewer",props: {// src pdf资源路径src: {type: String,default: () => {return null;},},// 该pdf-viewer组件唯一idcontainerId: {type: String,default: () => {return null;},},// 该pdf-viewer组件唯一refpdfRef: {type: String,default: () => {return null;},},// 是否展示下载按钮isShowDownloadBtn: {type: Boolean,default: () => {return false;}},},components: {pdf},computed: {hasProps() {return this.src && this.containerId && this.pdfRef;}},created() { },mounted() {this.$nextTick(() => {this.prohibit();})},data() {return {scale: 100, // 开始的时候默认和容器一样大即宽高都是100%rotation: 0, // 旋转角度currentPage: 0, // 当前页数pageCount: 0, // 总页数}},methods: {rotate() {this.rotation += 90;this.$refs[this.pdfRef].$el.style.transform = `rotate(${this.rotation}deg)`;console.log(`当前旋转角度: ${this.rotation}°`);},// 页面回到顶部toTop() {document.getElementById(this.containerId).scrollTop = 0},// 输入页码时校验inputEvent() {if (this.currentPage > this.pageCount) {// 1. 大于maxthis.currentPage = this.pageCount} else if (this.currentPage < 1) {// 2. 小于minthis.currentPage = 1}},// 切换页数changePdfPage(val) {if (val === 'pre' && this.currentPage > 1) {// 切换后页面回到顶部this.currentPage--this.toTop()} else if (val === 'next' && this.currentPage < this.pageCount) {this.currentPage++this.toTop()} else if (val === 'first') {this.currentPage = 1this.toTop()} else if (val === 'last' && this.currentPage < this.pageCount) {this.currentPage = this.pageCountthis.toTop()}this.$refs[this.pdfRef].$el.style.transform = `rotate(0deg)`;this.rotation = 0;},// pdf加载时loadPdfHandler(e) {// 加载的时候先加载第一页// console.log(e);this.currentPage = 1},// 禁用鼠标右击、F12 来禁止打印和打开调试工具prohibit() {let node = document.querySelector(`#${this.containerId}`);node.oncontextmenu = function () {return false}node.onkeydown = function (e) {console.log("禁用", e);if (e.ctrlKey && (e.keyCode === 65 || e.keyCode === 67 || e.keyCode === 73 || e.keyCode === 74 || e.keyCode === 80 || e.keyCode === 83 || e.keyCode === 85 || e.keyCode === 86 || e.keyCode === 117)) {return false}if (e.keyCode === 18 || e.keyCode === 123) {return false}}},//放大scaleUp() {if (this.scale == 300) {return;}this.scale += 5;this.$refs[this.pdfRef].$el.style.width = parseInt(this.scale) + "%";this.$refs[this.pdfRef].$el.style.height = parseInt(this.scale) + "%";console.log(`当前缩放倍数: ${this.scale}%`);},//缩小scaleDown() {if (this.scale == 30) {return;}this.scale += -5;this.$refs[this.pdfRef].$el.style.width = parseInt(this.scale) + "%";this.$refs[this.pdfRef].$el.style.height = parseInt(this.scale) + "%";console.log(`当前缩放倍数: ${this.scale}%`);},// 下载downPDF() { // 下载 pdfvar url = this.srcvar tempLink = document.createElement("a");tempLink.style.display = "none";tempLink.href = url;tempLink.setAttribute("download", 'XXX.pdf');if (typeof tempLink.download === "undefined") {tempLink.setAttribute("target", "_blank");}document.body.appendChild(tempLink);tempLink.click();document.body.removeChild(tempLink);},}
}
</script><style lang="scss" scoped>
#container {overflow: auto;height: 800px;font-family: PingFang SC;width: 100%;display: flex;/* justify-content: center; */position: relative;
}.container {position: relative;
}/* 右侧功能按钮区 */
.right-btn {// position: fixed;position: absolute;right: 10%;// bottom: 15%;top: 5%;width: 120px;display: flex;flex-wrap: wrap;justify-content: center;z-index: 99;user-select: none;
}.pdfArea {width: 80%;
}/* ------------------- 输入页码 ------------------- */
.pageNum {margin: 10px 0;font-size: 18px;
}
/*在谷歌下移除input[number]的上下箭头*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {-webkit-appearance: none !important;margin: 0;
}.inputNumber {border-radius: 8px;border: 1px solid #999999;height: 35px;font-size: 18px;width: 60px;text-align: center;
}
.inputNumber:focus {border: 1px solid #00aeff;background-color: rgba(18, 163, 230, 0.096);outline: none;transition: 0.2s;
}/* ------------------- 切换页码 ------------------- */
.turn {background-color: #888888;opacity: 0.7;color: #ffffff;height: 70px;width: 70px;border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 5px 0;
}.turn-btn {background-color: #000000;opacity: 0.6;color: #ffffff;height: 70px;width: 70px;border-radius: 50%;margin: 5px 0;display: flex;align-items: center;justify-content: center;
}.turn-btn:hover,
.turn:hover {transition: 0.3s;opacity: 0.5;cursor: pointer;
}/* ------------------- 进度条 ------------------- */
.progress {position: absolute;right: 50%;top: 50%;text-align: center;
}
.progress > span {color: #199edb;font-size: 14px;
}
</style>
main.js中引用,全局注册
import PdfViewer from "@/components/PdfViewer"
Vue.component('PdfViewer', PdfViewer)
在项目中使用
<el-dialog><PdfViewer :src="pdf地址" containerId="id,自定义" pdfRef="ref,自定义" :isShowDownloadBtn="布尔值,是否开启下载功能"></PdfViewer>
</el-dialog>
使用效果
相关文章:
vue-pdf在vue框架中的使用
在components目录下新建PdfViewer/index.vue vue-pdf版本为4.3.0 <template><div :id"containerId" v-if"hasProps" class"container"><div class"right-btn"><div class"pageNum"><input v-m…...
Wordpress页面生成器:Elementor 插件制作网站页面教程(图文完整)
本文来教大家怎么使用Wordpress Elementor页面编辑器插件来自由创建我们的网页内容。很多同学在面对建站的时候,一开始都是热血沸腾信心满满的,等到实际上手的时候就会发现有很多问题都是无法解决的,希望本篇Elementor插件使用指南能够帮助到你。 Wordpress Elementor页面编…...
完全随机设计的方差分析
一、说明 实验设计在科学研究中发挥着至关重要的作用,使研究人员能够从数据中得出有意义的结论。一种常见的实验设计是完全随机设计(CRD),其特征是将实验单元随机分配到治疗组。CRD 的方差分析 (ANOVA) 是一种统计技术,…...
035、目标检测-物体和数据集
之——物体检测和数据集 目录 之——物体检测和数据集 杂谈 正文 1.目标检测 2.目标检测数据集 3.目标检测和边界框 4.目标检测数据集示例 杂谈 目标检测是计算机视觉中应用最为广泛的,之前所研究的图片分类等都需要基于目标检测完成。 在图像分类任务中&am…...
【开源】基于Vue.js的社区买菜系统的设计和实现
项目编号: S 011 ,文末获取源码。 \color{red}{项目编号:S011,文末获取源码。} 项目编号:S011,文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、系统设计2.1 功能模块设计2.1.1 数据中心模块2.1…...
【双指针】复写0
复写0 1089. 复写零 - 力扣(LeetCode) 给你一个长度固定的整数数组 arr ,请你将该数组中出现的每个零都复写一遍,并将其余的元素向右平移。 注意:请不要在超过该数组长度的位置写入元素。请对输入的数组 就地 进行上…...
记录一些涉及到界的题
文章目录 coppersmith的一些相关知识题1 [N1CTF 2023] e2Wrmup题2 [ACTF 2023] midRSA题3 [qsnctf 2023]浅记一下 coppersmith的一些相关知识 上界 X c e i l ( 1 2 ∗ N β 2 d − ϵ ) X ceil(\frac{1}{2} * N^{\frac{\beta^2}{d} - \epsilon}) Xceil(21∗Ndβ2−ϵ) …...
Linux秋招面试题
自己在秋招过程中遇到的Linux相关的面试题 linux查找含有“xxxx”的文件名 将/path/to/search替换为要搜索的目录路径,xxxx表示要匹配的文件名模式,其中xxxx是你要查找的字符串。这个命令将会在指定路径下递归地查找所有文件名中包含给定字符串的文件 …...
OPPO发布AndesGPT大模型;Emu Video和Emu Edit的新突破
🦉 AI新闻 🚀 OPPO发布全新ColorOS 14及自主训练的AndesGPT大模型 摘要:OPPO在2023 OPPO开发者大会上发布了全新的ColorOS 14,并正式推出了自主训练的安第斯大模型(AndesGPT)。AndesGPT拥有对话增强、个人…...
2311rust,到46版本更新
1.43.0稳定版 项(item)片段 在宏中,可用项片段把项插值到特征,实现和extern块的块体中.如: macro_rules! mac_trait {($i:item) > {trait T { $i }} } mac_trait! {fn foo() {} }这生成: trait T {fn foo() {} }围绕原语的推导类型 改进了围绕原语,引用和二进制操作的推…...
Rust根据条件删除相邻元素:dedup
文章目录 示例dedup_bydedup_by_key Rust系列:初步⚙所有权⚙结构体和枚举类⚙函数进阶⚙泛型和特征⚙并发和线程通信 示例 Rust中的动态数组Vec提供了dedup函数,用于删除相邻重复元素。此外,还提供了dedup_by和dedup_by_key,可…...
2023年(第六届)电力机器人应用与创新发展论坛-核心PPT资料下载
一、峰会简介 大会以“聚焦电力机器人创新、助力行业数字化转型、促进产业链协同发展”为主题,展示电力机器人产业全景创新技术,探讨数字化战略下电力机器人应用前景和发展趋势。为加快推进电力机器人应用拓新,助力电网数字化转型升级&#…...
Android BitmapFactory.decodeResource读取原始图片装载成原始宽高Bitmap,Kotlin
Android BitmapFactory.decodeResource读取原始图片装载成原始宽高Bitmap,Kotlin fun getOriginalBitmap(resId: Int): Bitmap {val options BitmapFactory.Options()options.inJustDecodeBounds true //只解析原始图片的宽高,不decode原始文件装载到内…...
阿里云服务器 手动搭建WordPress(CentOS 8)
前提条件 已创建Linux操作系统的ECS实例,并且手动部署LNMP环境,具体操作,请参见手动部署LNMP环境(CentOS 8)。本教程使用的相关资源版本如下。 实例规格:ecs.c6.large 操作系统:公共镜像CentO…...
竞赛 题目:基于深度学习的中文对话问答机器人
文章目录 0 简介1 项目架构2 项目的主要过程2.1 数据清洗、预处理2.2 分桶2.3 训练 3 项目的整体结构4 重要的API4.1 LSTM cells部分:4.2 损失函数:4.3 搭建seq2seq框架:4.4 测试部分:4.5 评价NLP测试效果:4.6 梯度截断…...
CCF ChinaSoft 2023 论坛巡礼|软件测试产教研融合论坛
2023年CCF中国软件大会(CCF ChinaSoft 2023)由CCF主办,CCF系统软件专委会、形式化方法专委会、软件工程专委会以及复旦大学联合承办,将于2023年12月1-3日在上海国际会议中心举行。 本次大会主题是“智能化软件创新推动数字经济与社…...
浅谈WPF之控件模板和数据模板
WPF不仅支持传统的Windows Forms编程的用户界面和用户体验设计,同时还推出了以模板为核心的新一代设计理念。在WPF中,通过引入模板,将数据和算法的“内容”和“形式”进行解耦。模板主要分为两大类:数据模板【Data Template】和控…...
微信小程序会议OA首页-开发说明创建项目关于flex布局关于尺寸单位(rpx)关于WXS轮播图会议信息
目录 1. 创建项目 2. 关于flex布局 3. 关于尺寸单位(rpx) 4. 关于WXS 4. 轮播图 5. 会议信息 1. 创建项目 基于微信原生开发工具,稳定版 Stable Build (1.06.22010310) 创建项目前,请确定有小程序测试账号 使用向导创建一个…...
Linux上编译和安装SOFA23.06
前言 你可以直接使用编译安装好的SOFA版本Installing from all-included binaries (v23.06.00): 如果你想自己编译,可以看我下面写的内容,不过绝大多数是从官网来的,如果和官网有出入,建议还是以官网为准。 在Linux下…...
定时任务 Spring Task
一、介绍 Spring Task 是Spring框架提供的任务调度工具,可以按照约定的时间自动执行某个代码逻辑。 定位: 定时任务框架 作用: 定时自动执行某段Java代码 二、cron 表达式 cron表达式在线生成器:https://cron.qqe2.com/ 1、说明…...
golang 上传图片 --chatGPT
问:makeImgUpload(path string) 实现发送发送图片, 发送类型为 multipart/form-data gpt: 下面是一个简单的 makeImgUpload 函数的实现,用于发送图片并以 multipart/form-data 格式进行上传。请注意,此代码假设图片文件路径是正确…...
Android Studio 写一个Java调用c++ 的demo
前提条件: 本地已经配置好了ndk环境,如果没有配置好,建议参考macos 配置ndk环境-CSDN博客 这篇链接。 新建一个Empty Project 比如我这里的Project的名字是HelloJNI,包名是com.example.hellojni 然后在src目录下,右键选择Add C …...
Pandas数据操作_Python数据分析与可视化
Pandas数据操作 排序操作对索引进行排序按行排序按值排序 删除操作算数运算去重duplicated()drop_duplicates() 数据重塑层次化索引索引方式内层选取数据重塑 排序操作 对索引进行排序 Series 用 sort_index() 按索引排序,sort_values() 按值排序; Dat…...
【Debug】查询的数据量比数据库中的数据量还要多
今天前端反馈了一个bug,某个接口返回的数据很多,我到mysql数据库看了一下,查询的表名为trs_risk,其中只有1000多条数据,而页面返回有5000多条数据!! 匪夷所思啊,我定位到Mapper层的…...
nodejs微信小程序-慢性胃炎健康管理系统的设计与实现-安卓-python-PHP-计算机毕业设计
目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性:…...
二十一、数组(1)
本章概要 数组特性 用于显示数组的实用程序 一等对象返回数组 简单来看,数组需要你去创建和初始化,你可以通过下标对数组元素进行访问,数组的大小不会改变。大多数时候你只需要知道这些,但有时候你必须在数组上进行更复杂的操作…...
react hook 获取setState的新值
利用useRef 存储最新值 let [count,setCount] useState(0)let countRef useRef(count)let handleClick function (){setCount((prev)>{countRef.current prev1return countRef.current})console.info(countRef.current)}利用useRef let [count,setCount] useState(0)le…...
JVM判断对象是否存活之引用计数法、可达性分析
目录 前言 引用计数法 概念 优点 缺点 可达性分析 概念 缺点: 扩展: 1.GC Roots 概念 2.STW (Stop the world) 前言 JVM有两种算法来判断对象是否存活,分别是引用计数法和可达性分析算法,针对可达性分析算法STW时间长、…...
报道 | 2023年12月-2024年2月国际运筹优化会议汇总
2023年12月-2024年2月召开会议汇总: The 16th Annual International Conference on Combinatorial Optimization and Applications (COCOA 2023) Location: Virtual Important dates: Conference: December 11, 2023 (Start) - December 13, 2023 (End) Details…...
【科技素养】蓝桥杯STEMA 科技素养组模拟练习试卷C
单选题 1、A right triangle has a side that is 5cm long, and its hypotenuse is 13cm long.The area of the triangle is (). A、30 cm2 B、60 cm2 C、65 cm2 D、32.5 cm2 答案:A 2、一位旅客安检后走在前往登机口的路上。路途中一部…...
“升级图片管理,优化工作流程——轻松将JPG转为PNG“
在图片时代,无论是工作还是生活,图片管理都显得尤为重要。批量处理图片,将JPG格式轻松转换为PNG格式,能够使您的图片管理更优化,提高工作效率。 首先,我们进入首助编辑高手主页面,会看到有多种…...
基于Springboot的地方美食分享网站(有报告)。Javaee项目,springboot项目。
演示视频: 基于Springboot的地方美食分享网站(有报告)。Javaee项目,springboot项目。 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。 项目介绍: 采用…...
助力水泥基建裂痕自动化巡检,基于yolov5融合ASPP开发构建多尺度融合目标检测识别系统
道路场景下的自动化智能巡检、洞体场景下的壁体类建筑缺陷自动检测识别等等已经在现实生活中不断地落地应用了,在我们之前的很多博文中也已经有过很多相关的实践项目经历了,本文的核心目的是想要融合多尺度感受野技术到yolov5模型中以期在较低参数量的情…...
rk3588使用vscode远程debug 配置文件
进入调试口,需要本地和远程都装C/C estension 下面是在调mpi_enc_test的launch.json 文件自己make生成的 makefile 没改过 args项是输入参数,配置了相机输入,具体参数看他的demo说明, 记录一下,方便以后拷贝方便 {// …...
隐私协议 Secret Network 宣布使用 Octopus Network 构建的 NEAR-IBC 连接 NEAR 生态
2023年11月 NearCon2023 活动期间,基于 Cosmos SDK 构建的隐私协议 Secret Network,宣布使用 Octopus Network 开发的 NEAR-IBC,于2024年第一季度实现 Secret Network 与 NEAR Protocol 之间的跨链交互。 这将会是Cosmos 生态与 NEAR 之间的首…...
Milvus Standalone安装
使用Docker Compose安装 Milvus standalone(即单机版),进行一个快速milvus的体验。 前提条件: 1.系统可以使用centos 2.系统已经安装docker和docker-compose 3.milvus版本这里选择2.3.1 由于milvus依赖etcd和minio,…...
二分查找算法合集
二分查找也称折半查找(Binary Search),它是一种效率较高的查找方法。但是,折半查找要求线性表必须采用顺序存储结构,而且表中元素按关键字有序排列。 时间复杂度 O(logn) 自己写二分算法 左闭右开 左开右闭C算法&a…...
SELinux零知识学习十八、SELinux策略语言之类型强制(3)
接前一篇文章:SELinux零知识学习十七、SELinux策略语言之类型强制(2) 二、SELinux策略语言之类型强制 2. 类型、属性和别名 (3)关联类型和属性 1)使用type语句关联类型和属性 迄今为止,我们…...
人工智能引领环境保护的新浪潮:技术应用及其影响
在全球范围内,环境保护已经成为一个迫切的话题。随着人工智能技术的发展,它开始在环境保护领域扮演越来越重要的角色。AI不仅能够帮助更有效地监测环境变化,还能提出解决方案来应对环境问题。 污染监测与控制: AI系统可以分析来自…...
第三十四节——组合式API使用路由
<template> <div><div>我是第一个页面</div><button click"link2">跳转到第二个页面</button></div> </template> <script setup>// 从vue-router引入 useRouter这个钩子import { useRouter } from vue-route…...
文件隐藏 [极客大挑战 2019]Secret File1
打开题目 查看源代码发现有一个可疑的php 访问一下看看 点一下secret 得到如下页面 响应时间太短我们根本看不清什么东西,那我们尝试bp抓包一下看看 提示有个secr3t.php 访问一下 得到 我们看见了flag.php 访问一下可是什么都没有 那我们就进行代码审计 $file$_…...
Linux CentOS 8(MariaDB的数据类型)
Linux CentOS 8(MariaDB的数据类型) 目录 一、项目描述二、相关知识三、项目分析3.1 数据类型的分类3.2 数据类型属性 一、项目描述 Jan16公司为满足部门之间数据共享、减少数据冗余度和保持数据独立性等要求,需要对数据库中的数据类型拥有一…...
云端援手:智能枢纽应对数字资产挑战 ——华为云11.11应用集成管理与创新专区优惠限时购
现新客3.96元起,下单有机会抽HUAWEI P60 Art 福利仅限双十一 机会唾手可得,立即行动! 「有效管理保护应用与数据的同时实现高效互通」——华为云全力满足企业需求,推出全套「应用集成管理与创新」智能解决方案:华为云…...
Azure的AI使用-(语言检测、图像分析、图像文本识别)
1.语言检测 安装包: # 语言检测 %pip install azure-ai-textanalytics5.2.0 需要用到密钥和资源的终结点,所以去Azure上创建资源,我这个是创建好的了然后点击密钥和终结者去拿到key和终结点 两个密钥选择哪个都行 语言检测代码示例&#…...
QDateEdit开发详解
文章目录 一、创建 `QDateEdit` 对象二、设置日期范围三、设置当前日期四、获取选择的日期五、显示日历弹出窗口六、信号与槽七、格式化日期显示1. `QDateTime` 类2. 日期时间格式化字符串3. 自定义格式化字符串4. 本地化日期格式5. `QDate` 和 `QTime` 的格式化6. 时间戳转日期…...
3.6 Windows驱动开发:内核进程汇编与反汇编
在笔者上一篇文章《内核MDL读写进程内存》简单介绍了如何通过MDL映射的方式实现进程读写操作,本章将通过如上案例实现远程进程反汇编功能,此类功能也是ARK工具中最常见的功能之一,通常此类功能的实现分为两部分,内核部分只负责读写…...
zsh和ohmyzsh安装指南+插件推荐
文章目录 1. 安装指南2. 插件配置指南3. 参考信息 1. 安装指南 1. 安装 zsh sudo apt install zsh2. 安装 Oh My Zsh 国内访问GitHub sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"这将安装 Oh My Zsh 和所…...
VS中修改解决方案名称和项目名称
如何修改visual studio2019中的项目名 - 知乎 (zhihu.com) 查了很多,还是这个可行。虽然文中说不是最简单的,但在所查找资料中是可行且最简单的。 要点主要是: 1、比如我们复制一个解决方案,最好是带代码哈,也就是添…...
iOS UITableView获取到的contentSize不正确
在开发中遇到一个需求,就是将一个tableView的contentsize设置成该 tableView的frame的size,但是 经过调试,发现获取到的contentsize不争确,后来发现是 没有设置一个属性 if (available(iOS 15.0, *)) {_tableView.sectionHeaderTopPadding …...
C++二分查找算法:查找和最小的 K 对数字
相关专题 二分查找相关题目 题目 给定两个以 非递减顺序排列 的整数数组 nums1 和 nums2 , 以及一个整数 k 。 定义一对值 (u,v),其中第一个元素来自 nums1,第二个元素来自 nums2 。 请找到和最小的 k 个数对 (u1,v1), (u2,v2) … (uk,vk) 。 示例 1:…...