当前位置: 首页 > news >正文

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页面编…...

完全随机设计的方差分析

一、说明 实验设计在科学研究中发挥着至关重要的作用&#xff0c;使研究人员能够从数据中得出有意义的结论。一种常见的实验设计是完全随机设计&#xff08;CRD&#xff09;&#xff0c;其特征是将实验单元随机分配到治疗组。CRD 的方差分析 (ANOVA) 是一种统计技术&#xff0c…...

035、目标检测-物体和数据集

之——物体检测和数据集 目录 之——物体检测和数据集 杂谈 正文 1.目标检测 2.目标检测数据集 3.目标检测和边界框 4.目标检测数据集示例 杂谈 目标检测是计算机视觉中应用最为广泛的&#xff0c;之前所研究的图片分类等都需要基于目标检测完成。 在图像分类任务中&am…...

【开源】基于Vue.js的社区买菜系统的设计和实现

项目编号&#xff1a; S 011 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S011&#xff0c;文末获取源码。} 项目编号&#xff1a;S011&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、系统设计2.1 功能模块设计2.1.1 数据中心模块2.1…...

【双指针】复写0

复写0 1089. 复写零 - 力扣&#xff08;LeetCode&#xff09; 给你一个长度固定的整数数组 arr &#xff0c;请你将该数组中出现的每个零都复写一遍&#xff0c;并将其余的元素向右平移。 注意&#xff1a;请不要在超过该数组长度的位置写入元素。请对输入的数组 就地 进行上…...

记录一些涉及到界的题

文章目录 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替换为要搜索的目录路径&#xff0c;xxxx表示要匹配的文件名模式&#xff0c;其中xxxx是你要查找的字符串。这个命令将会在指定路径下递归地查找所有文件名中包含给定字符串的文件 …...

OPPO发布AndesGPT大模型;Emu Video和Emu Edit的新突破

&#x1f989; AI新闻 &#x1f680; OPPO发布全新ColorOS 14及自主训练的AndesGPT大模型 摘要&#xff1a;OPPO在2023 OPPO开发者大会上发布了全新的ColorOS 14&#xff0c;并正式推出了自主训练的安第斯大模型&#xff08;AndesGPT&#xff09;。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系列&#xff1a;初步⚙所有权⚙结构体和枚举类⚙函数进阶⚙泛型和特征⚙并发和线程通信 示例 Rust中的动态数组Vec提供了dedup函数&#xff0c;用于删除相邻重复元素。此外&#xff0c;还提供了dedup_by和dedup_by_key&#xff0c;可…...

2023年(第六届)电力机器人应用与创新发展论坛-核心PPT资料下载

一、峰会简介 大会以“聚焦电力机器人创新、助力行业数字化转型、促进产业链协同发展”为主题&#xff0c;展示电力机器人产业全景创新技术&#xff0c;探讨数字化战略下电力机器人应用前景和发展趋势。为加快推进电力机器人应用拓新&#xff0c;助力电网数字化转型升级&#…...

Android BitmapFactory.decodeResource读取原始图片装载成原始宽高Bitmap,Kotlin

Android BitmapFactory.decodeResource读取原始图片装载成原始宽高Bitmap&#xff0c;Kotlin fun getOriginalBitmap(resId: Int): Bitmap {val options BitmapFactory.Options()options.inJustDecodeBounds true //只解析原始图片的宽高&#xff0c;不decode原始文件装载到内…...

阿里云服务器 手动搭建WordPress(CentOS 8)

前提条件 已创建Linux操作系统的ECS实例&#xff0c;并且手动部署LNMP环境&#xff0c;具体操作&#xff0c;请参见手动部署LNMP环境&#xff08;CentOS 8&#xff09;。本教程使用的相关资源版本如下。 实例规格&#xff1a;ecs.c6.large 操作系统&#xff1a;公共镜像CentO…...

竞赛 题目:基于深度学习的中文对话问答机器人

文章目录 0 简介1 项目架构2 项目的主要过程2.1 数据清洗、预处理2.2 分桶2.3 训练 3 项目的整体结构4 重要的API4.1 LSTM cells部分&#xff1a;4.2 损失函数&#xff1a;4.3 搭建seq2seq框架&#xff1a;4.4 测试部分&#xff1a;4.5 评价NLP测试效果&#xff1a;4.6 梯度截断…...

CCF ChinaSoft 2023 论坛巡礼|软件测试产教研融合论坛

2023年CCF中国软件大会&#xff08;CCF ChinaSoft 2023&#xff09;由CCF主办&#xff0c;CCF系统软件专委会、形式化方法专委会、软件工程专委会以及复旦大学联合承办&#xff0c;将于2023年12月1-3日在上海国际会议中心举行。 本次大会主题是“智能化软件创新推动数字经济与社…...

浅谈WPF之控件模板和数据模板

WPF不仅支持传统的Windows Forms编程的用户界面和用户体验设计&#xff0c;同时还推出了以模板为核心的新一代设计理念。在WPF中&#xff0c;通过引入模板&#xff0c;将数据和算法的“内容”和“形式”进行解耦。模板主要分为两大类&#xff1a;数据模板【Data Template】和控…...

微信小程序会议OA首页-开发说明创建项目关于flex布局关于尺寸单位(rpx)关于WXS轮播图会议信息

目录 1. 创建项目 2. 关于flex布局 3. 关于尺寸单位&#xff08;rpx&#xff09; 4. 关于WXS 4. 轮播图 5. 会议信息 1. 创建项目 基于微信原生开发工具&#xff0c;稳定版 Stable Build (1.06.22010310) 创建项目前&#xff0c;请确定有小程序测试账号 使用向导创建一个…...

Linux上编译和安装SOFA23.06

前言 你可以直接使用编译安装好的SOFA版本Installing from all-included binaries (v23.06.00)&#xff1a; 如果你想自己编译&#xff0c;可以看我下面写的内容&#xff0c;不过绝大多数是从官网来的&#xff0c;如果和官网有出入&#xff0c;建议还是以官网为准。 在Linux下…...

定时任务 Spring Task

一、介绍 Spring Task 是Spring框架提供的任务调度工具&#xff0c;可以按照约定的时间自动执行某个代码逻辑。 定位&#xff1a; 定时任务框架 作用&#xff1a; 定时自动执行某段Java代码 二、cron 表达式 cron表达式在线生成器&#xff1a;https://cron.qqe2.com/ 1、说明…...

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...