背景
公司须要实现一个PDF电子签章我的项目，应用到pdfvuer插件，
应用步骤
- 加载包：pdfvuer
npm i pdfvuer 引入
import pdfvuer from 'pdfvuer' // pdfvuer 版本为@1.6.1import 'pdfjs-dist/build/pdf.worker.entry'- pdf预览（简化版）
<template> <pdf src="./static/test.pdf" :page="1"> <template slot="loading"> loading content here... </template> </pdf></template><script>import pdf from 'pdfvuer'export default { components: { pdf }}- pdf预览（带分页）
基于element+pdfvuer实现的分页预览pdf，能够跳转分页和滑动解决页码
<template> <!--应用 pdfvuer 实现 滑动浏览 单印章--> <div id="boxContent"> <div id="contentArea" class="centerArea"> <pdf ref="wrapper" :src="pdfData" v-for="i in numPages" :key="i" :id="i" :page="i" style="width:100%;" :scale="1"> <template slot="loading"> loading content here... </template> </pdf> </div> <div class="rightArea"> <div class="toolGroup"> <div class="page">第 {{ page }} / {{ numPages }} 页</div> <el-button type="primary" @click.stop="prePage">上一页</el-button> <el-button type="primary" @click.stop="nextPage">下一页</el-button> <div class="toolArea"> <span>跳到</span> <el-input v-model="inputPage" @keyup.enter.native="pageChange"/> <span>页</span> </div> </div> </div> </div></template><script>import pdfvuer from 'pdfvuer' // pdfvuer 版本为@1.6.1import 'pdfjs-dist/build/pdf.worker.entry'export default { name: 'Pdfvuer', components: { pdf: pdfvuer }, data() { return { page: 1, // 当前页 numPages: 0, // 总页数 pdfData: undefined, inputPage: 1, // 输出的页码 } }, mounted() { this.getPdf() window.addEventListener('scroll', this.handleScroll, true); }, beforeDestroy() { window.removeEventListener('scroll', this.handleScroll, true); }, watch: { show: function (s) { if (s) { this.getPdf() } } }, methods: { // 获取 pdf 信息 getPdf() { this.pdfData = pdfvuer.createLoadingTask('/test.pdf') this.pdfData.then(pdf => { this.numPages = pdf.numPages }).catch(err => { console.log(err) }) }, // 滚动事件 滚动时更新页码 handleScroll() { let scrollTop = this.getScrollTop() // 滚动高度 let onePageHeight = this.getAttributeValue('page', 'height') // 单页面高度 this.page = Math.round(scrollTop / onePageHeight) + 1 // this.inputPage = this.page }, // 获取滚动高度 getScrollTop() { let scroll_top = 0; if (document.documentElement && document.documentElement.scrollTop) { scroll_top = document.documentElement.scrollTop; } else if (document.body) { scroll_top = document.body.scrollTop; } return scroll_top; }, // 滚动到固定地位 goTo(target) { let scrollT = document.body.scrollTop || document.documentElement.scrollTop if (scrollT > target) { let timer = setInterval(function () { let scrollT = document.body.scrollTop || document.documentElement.scrollTop let step = Math.floor(-scrollT / 6); document.documentElement.scrollTop = document.body.scrollTop = step + scrollT; if (scrollT <= target) { document.body.scrollTop = document.documentElement.scrollTop = target; clearTimeout(timer); } }, 20) } else if (scrollT === 0) { let timer = setInterval(function () { let scrollT = document.body.scrollTop || document.documentElement.scrollTop let step = Math.floor(300 / 3 * 0.7); document.documentElement.scrollTop = document.body.scrollTop = step + scrollT; if (scrollT >= target) { document.body.scrollTop = document.documentElement.scrollTop = target; clearTimeout(timer); } }, 20) } else if (scrollT < target) { let timer = setInterval(function () { let scrollT = document.body.scrollTop || document.documentElement.scrollTop let step = Math.floor(scrollT / 6); document.documentElement.scrollTop = document.body.scrollTop = step + scrollT; if (scrollT >= target) { document.body.scrollTop = document.documentElement.scrollTop = target; clearTimeout(timer); } }, 20) } else if (target === scrollT) { return false; } }, // 上一页 prePage() { let page = this.page; page = page > 1 ? page - 1 : 1; this.page = page; this.changeScrollTop() }, // 下一页 nextPage() { let page = this.page; page = page < this.numPages ? page + 1 : this.numPages; this.page = page; this.changeScrollTop() }, // 依据输出的页码跳转页面 pageChange() { let reg = /^[1-9]\d*$/ if (!reg.test(this.inputPage)) { this.$message.error('请输出正确的页码') return } this.inputPage > this.numPages ? this.page = this.numPages : this.page = ~~this.inputPage this.inputPage < 1 ? this.page = 1 : this.page = ~~this.inputPage this.changeScrollTop() }, // 依据页码变动批改页面滚动间隔 changeScrollTop() { let onePageHeight = document.getElementById('contentArea').offsetHeight / this.numPages let scrollTo = onePageHeight * (this.page - 1) this.goTo(scrollTo) }, // 获取节点的某个属性值 只实用于获取 px 相干数据 getAttributeValue(className, attr) { let pageDiv = document.querySelector('.' + className); let attrsValue = getComputedStyle(pageDiv); let attrVal = attrsValue[attr] return Number(attrVal.substr(0, attrVal.length - 2)) // 截取掉 px }, }}</script>练习代码指路
练习平台还有pdf盖章拖拽代码和一些其余小插件的应用办法，有须要的小可爱们自行拉取。路过能够棘手点个赞哦 ~~