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>

使用效果

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

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

相关文章

学习指南:如何快速上手媒体生态一致体验开发

过去开发者们在使用多媒体能力时&#xff0c;往往会遇到这样的问题&#xff0c;比如&#xff1a;为什么我开发的相机不如系统相机的效果好&#xff1f;为什么我的应用和其他的音乐一起发声了&#xff0c;我要怎么处理&#xff1f;以及我应该怎么做才能在系统的播控中心里可以看…

ExoPlayer架构详解与源码分析(9)——TsExtractor

系列文章目录 ExoPlayer架构详解与源码分析&#xff08;1&#xff09;——前言 ExoPlayer架构详解与源码分析&#xff08;2&#xff09;——Player ExoPlayer架构详解与源码分析&#xff08;3&#xff09;——Timeline ExoPlayer架构详解与源码分析&#xff08;4&#xff09;—…

Rockdb简介

背景 最近在使用flink的过程中&#xff0c;由于要存储的状态很大&#xff0c;所以使用到了rockdb作为flink的后端存储&#xff0c;本文就来简单看下rockdb的架构设计 Rockdb设计 Rockdb采用了LSM的结构&#xff0c;它和hbase很像&#xff0c;不过严格的说&#xff0c;基于LS…

VBA_MF系列技术资料1-222

MF系列VBA技术资料 为了让广大学员在VBA编程中有切实可行的思路及有效的提高自己的编程技巧&#xff0c;我参考大量的资料&#xff0c;并结合自己的经验总结了这份MF系列VBA技术综合资料&#xff0c;而且开放源码&#xff08;MF04除外&#xff09;&#xff0c;其中MF01-04属于定…

如何使用软路由R4S+iStoreOS实现远程访问内网电脑桌面

软路由R4SiStoreOS实现公网远程桌面局域网内电脑 文章目录 软路由R4SiStoreOS实现公网远程桌面局域网内电脑简介一、配置远程桌面公网地址二、家中使用永久固定地址 访问公司电脑**具体操作方法是&#xff1a;** 简介 上篇教程我们介绍了如何在iStoreOS中安装Cpolar&#xff0…

腾讯云便宜服务器有哪些?腾讯云这个服务器一个月7块钱!

大家好&#xff0c;今天我们来一起探讨一下腾讯云便宜服务器的相关问题。相信很多人在寻找可靠的云服务器时都会关注价格&#xff0c;而腾讯云作为国内领先的云计算平台&#xff0c;其价格优惠的服务器产品也是备受关注。那么&#xff0c;腾讯云便宜服务器有哪些呢&#xff1f;…

23111701[含文档+PPT+源码等]计算机毕业设计javaweb点餐系统全套餐饮就餐订餐餐厅

文章目录 **项目功能简介:****点餐系统分为前台和后台****前台功能介绍&#xff1a;****后台功能介绍&#xff1a;** **论文截图&#xff1a;****实现&#xff1a;****代码片段&#xff1a;** 编程技术交流、源码分享、模板分享、网课教程 &#x1f427;裙&#xff1a;77687156…

rabbitMQ的死信队列的处理模型示例

示例场景&#xff1a; 消费者发送消息给normal_exchange交换机&#xff0c;队列normal-queue通过routingKeyz:zhangsan绑定normal_exchange&#xff0c;消费者C1消费。 使队列normal_queue达到死信条件时候&#xff0c;normal-queue队列把消息发送给dead-exchange交换机&#x…

echarts 实现同一组legend控制两个饼图示例

实现同一组legend控制两个饼图示例&#xff1a; 该示例有如下几个特点&#xff1a; ①饼图不同值实现分割 ②实现tooltip自定义样式&#xff08;echarts 实现tooltip提示框样式自定义-CSDN博客&#xff09; ③自定义label内容 ④不同值颜色渐变 代码如下&#xff1a; this.o…

Python基础:输入输出详解-输出字符串格式化

Python中的输入和输出是编程中非常重要的方面。 1. 输入输出简单介绍 1.1 输入方式 Python中的输入可以通过input()函数从键盘键入&#xff0c;也可以通过命令行参数或读取文件的方式获得数据来源。 1&#xff09;input()示例 基本的input()函数&#xff0c;会将用户在终端&…

爬取全国高校数据 (高校名称,高校所在地,高校类型,高校性质,高校特色,高校隶属,学校网站)

爬取全国高校数据 网站&#xff1a; 运行下面代码得到网站. import base64 # 解码 website base64.b64decode(IGh0dHA6Ly9jb2xsZWdlLmdhb2thby5jb20vc2NobGlzdC8.encode(utf-8)) print(website)分析&#xff1a; 我们需要爬取的字段&#xff0c;高校名称&#xff0c;高校所…

计算两个图形遮盖率

读取图像 首先&#xff0c;加载待处理的图像&#xff0c;可以使用图像处理库&#xff08;例如OpenCV&#xff09;来实现这一步。确保已加载正确的图像。 定义特定颜色范围 确定所需的特定颜色范围。这将是要检测的马赛克填充的颜色。需要指定颜色的下限值和上限值&#xff0c;通…