关于前端PDF显示和盖章（vue）

PDF显示用的是 pdfjs-dist

1.vue中引入pdfjs依赖

npm install pdfjs-dist --save

2.使用canvas当预览pdf文件的画布

<canvas v-for="page in pages" :id="'the-canvas'+page" :key="page"></canvas>

3.调用pdfjs的api进行文档渲染

let PDFJS = require('pdfjs-dist');
PDFJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.min');_renderPage (num) {this.pdfDoc.getPage(num).then((page) => {let canvas = document.getElementById('the-canvas' + num)let ctx = canvas.getContext('2d')let dpr = window.devicePixelRatio || 1let bsr = ctx.webkitBackingStorePixelRatio ||ctx.mozBackingStorePixelRatio ||ctx.msBackingStorePixelRatio ||ctx.oBackingStorePixelRatio ||ctx.backingStorePixelRatio || 1let ratio = dpr / bsrlet viewport = page.getViewport(screen.availWidth / page.getViewport(1).width)canvas.width = viewport.width * ratiocanvas.height = viewport.height * ratiocanvas.style.width = viewport.width + 'px'canvas.style.height = viewport.height + 'px'ctx.setTransform(ratio, 0, 0, ratio, 0, 0)let renderContext = {canvasContext: ctx,viewport: viewport}page.render(renderContext)if (this.pages > num) {this._renderPage(num + 1)}})},_loadFile (url) {PDFJS.getDocument(url).then((pdf) => {this.pdfDoc = pdfconsole.log(pdf)this.pages = this.pdfDoc.numPagesthis.$nextTick(() => {this._renderPage(1)})})}

实现盖章之前要了解 scrollTop 、 scrollLeft 、 clientX、clientY 、offsetLeft、offsetTop、clientWidth、clientHeight的区别

clientX、clientY
点击位置距离当前body可视区域的x，y坐标

以上这些属性最好自己写例子体验一下

盖章具体代码

注意要拖拽的图片需要以背景图的形式

<div class="seal-wrapper-item"><div class="sign-img" style="background-image: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582010369901&di=b5a374b084d96817dd20ef9b082e99ce&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F16%2F08%2F19%2F1357b69b5969b65.jpg');height: 100px;width: 100px"  @mousedown='signPic'><div class="delete" @click.stop="deleteIt">删除</div></div>
</div>

mouseenter(e) {e.currentTarget.childNodes[0].style.display = "block"},mouseleave(e) {e.currentTarget.childNodes[0].style.display = "none"},deleteIt(e) {document.querySelector('.pdf-box').removeChild(e.currentTarget.parentNode);},
signPic(e) {if (document.querySelectorAll('.mark').length >= 3) {this.$message.error("最多可以盖三个")return;}let dom = e.currentTarget.cloneNode(true);document.querySelector('#signContract').appendChild(dom);document.onmousemove = e => {dom.style.left = (this.getPos(e).x - parseInt(dom.clientWidth / 2) - 10) + 'px';dom.style.top = (this.getPos(e).y - parseInt(dom.clientHeight / 2) + this.scrollTop - 10) + 'px';dom.className = "sign-img mark";};// 鼠标抬开document.onmouseup = e => {dom.style.left = (this.getPos(e).x + document.querySelector('.pdf-container').scrollLeft - parseInt(dom.clientWidth / 2) - 10 - document.querySelector('.pdf-box').offsetLeft) + 'px';dom.style.top = (this.getPos(e).y + this.scrollTop - parseInt(dom.clientHeight / 2) - 105) + 'px';dom.style.height = 100 * this.scale + "px";dom.style.width = 100 * this.scale + "px";//限制区域if (parseInt(dom.style.left) < 0) {document.querySelector('#signContract').removeChild(dom);this.$message.error("请将印章拖拽到合同区域")return;} else if (parseInt(dom.style.left) > document.querySelector('.pdf-box').clientWidth - dom.clientWidth) {document.querySelector('#signContract').removeChild(dom);this.$message.error("请将印章拖拽到合同区域")return;}if (parseInt(dom.style.top) < 0) {document.querySelector('#signContract').removeChild(dom);this.$message.error("请将印章拖拽到合同区域")return;} else if (parseInt(dom.style.left) > document.querySelector('.pdf-box').clientHeight - dom.clientWidth) {document.querySelector('#signContract').removeChild(dom);this.$message.error("请将印章拖拽到合同区域")return;}document.querySelector('#signContract').removeChild(dom);document.querySelector('.pdf-box').appendChild(dom);document.onmousemove = null;document.onmouseup = null;dom.onmousedown = this.moveTo;dom.onmouseenter = this.mouseenter;dom.onmouseleave = this.mouseleave;dom.childNodes[0].onclick = this.deleteIt;};},moveTo(e) {let odiv = e.currentTarget; //获取目标元素//算出鼠标相对元素的位置let disX = e.clientX - odiv.offsetLeft;let disY = e.clientY - odiv.offsetTop;document.onmousemove = e => {let left = e.clientX - disX;let top = e.clientY - disY;//限制区域if (left <= 0) {left = 0;} else if (left >= document.querySelector('.pdf-box').clientWidth - odiv.clientWidth) {left = document.querySelector('.pdf-box').clientWidth - odiv.clientWidth;} else {left = left - 10}if (top <= 0) {top = 0;} else if (top >= document.querySelector('.pdf-box').clientHeight - odiv.clientWidth) {top = document.querySelector('.pdf-box').clientHeight - odiv.clientWidth;} else {top = top - 10}//移动当前元素odiv.style.left = left + "px";odiv.style.top = top + "px";};document.onmouseup = e => {document.onmousemove = null;document.onmouseup = null;};},getPos(ev) {return {x: ev.clientX, y: ev.clientY};},

最后效果：

最后增加GitHub的demo地址有帮助到的请点个star https://github.com/harrietjia/vue-pdf-show （注意如果pdf显示报错的话把/static/pdf下的build文件夹和lib文件夹把/node_modules/pdfjs-dist/下的同名文件夹替换覆盖掉）

参考链接：https://www.jianshu.com/p/94cf6ddcb299

https://segmentfault.com/a/1190000016963084

关于前端PDF显示和盖章（vue）相关推荐

【BUG日记】【VUE】【JAVA】后端已经添加上@CrossOrigin，前端还是显示Access to XMLHttpRequest...
[日期]: 2021/10/21 [问题]: 后端已经添加上@CrossOrigin,前端还是显示 Access to XMLHttpRequest at 'localhost:0209/aduicl ...
2020前端最新面试题（vue篇）
2020前端最新面试题(vue篇) 由于疫情原因,原本每年的"金三银四"仿佛消失,随之而来的是找工作的压力,这里给要面试的小伙伴们总结了到目前为止我遇到的前端面试题,仅供参考哦,第 ...
预览word，excel，ppt，pdf、图片————使用vue实现
预览word,excel,ppt,pdf.图片----使用vue实现需要下载的依赖: template模板实现: 方法的实现: 需要下载的依赖: npm i xlsx // 预览excel插件 np ...
pageoffice 骑缝章_用 pageoffice 实现 pdf 文件签字盖章
电子签名/签章的使用场景有哪些? 1. 电子报告 2. 证书电子版固化 3. 企业工作流审批 4. 电商订单存证 5. 系统单据保全为什么要在pdf 文件上盖章? 在很多合同签订的过程中,很多人直接 ...
SpreadJS 表格控件发布V11版本，新增图表及前端PDF导出！
日前,全球最大的控件提供商葡萄城宣布,SpreadJS 纯前端表格控件正式发布V11 版本.新版本亮点颇多,不但为用户带来期待已久的图表功能,还新增前端导出 PDF.列分组等功能,在数据可视化方面更进 ...
魔方APP项目-07-客户端提交登录信息、在APICloud中集成防水墙验证码，前端获取显示并校验验证码、服务端校验验证码、保存用户登录状态，APICloud提供的数据存储、客户端保存用户登陆数据
用户登录一.客户端提交登录信息 html/login.html,代码: <!DOCTYPE html> <html> <head><title>登录& ...
前端可排程的vue 排程甘特图
话不多说直接上图结合全网的开源码,又根据echart 图做出了前端可排程的vue 排程甘特图首先要引入echart 模板这里就不再赘述了在这里插入图片描述之后对它进行魔改将横轴改为时间 ...
ios 前端时间显示NaN异常解决办法
ios 前端时间显示NaN异常解决办法参考文章: (1)ios 前端时间显示NaN异常解决办法 (2)https://www.cnblogs.com/panda-yichen/p/11040196. ...
[vue] 如果让你教一个2-3年经验前端经验的同事使用vue，你该怎么教？
[vue] 如果让你教一个2-3年经验前端经验的同事使用vue,你该怎么教? 直接甩已经有的项目给他简单说下 vuex router ,和项目中常用操作和注意事项比如什么时候可以用箭头函数什么 ...
数据库为date型，而前端要显示String型，问题解决
关于数据库字段类型与前端显示类型不符问题解决: 最近遇到这样的一个问题,有一个字段在数据库是date型的,但是产品需求我们在前端这样显示,如下图: 先把时间显示出来,最后一行显示上面所有记录的汇总. ...

关于前端PDF显示和盖章（vue）

关于前端PDF显示和盖章（vue）相关推荐

最新文章

热门文章