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）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。