vue-pdf在vue框架中的使用

在components目录下新建PdfViewer/index.vue

vue-pdf版本为4.3.0

 / {{pageCount}}首页上一页下一页尾页放大缩小旋转下载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) {// 切换后页面回到顶部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);},}}#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;}

main.js中引用，全局注册

import PdfViewer from "@/components/PdfViewer"Vue.component('PdfViewer', PdfViewer)

在项目中使用

使用效果