background

Companies need to implement a PDF electronic signature project using the PDFVuer plug-in,

Using the step

1. Load the pdfvuer package

npm i pdfvuer

2. The introduction of

Import pdfvuer from 'pdfvuer / / pdfvuer version for @ 1.6.1 import' PDFJS - dist/build/PDF. Worker. Entry 'Copy the code

3. PDF Preview (Simplified version)

<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
  }
}
Copy the code

4. PDF preview (with pagination)

Page preview PDF based on Element + PDfvuer, you can jump between pages and slide page numbers

<template> <! <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 }} page </div> <el-button type="primary" @click.stop="prePage"> <div class="toolArea"> <span> <span> <el-input V-model ="inputPage" </span> @keyup.enter.native="pageChange"/> <span> page </span> </div> </div> </div> </div> </template> <script> import pdfvuer from 'pdfvuer / / pdfvuer version for @ 1.6.1 import' PDFJS - dist/build/PDF. Worker. Entry 'export default {name:' pdfvuer 'components: {PDF: pdfvuer}, data() {return {page: 1, numPages: 0, // pdfData: undefined, inputPage: }}, 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 information getPdf () {this. PdfData = pdfvuer. CreateLoadingTask ('/test. PDF) enclosing pdfData. Then (PDF = > {enclosing numPages  = pdf.numPages }).catch(err => { console.log(err) }) }, HandleScroll () {let scrollTop = this.getscrollTop () // Let onePageHeight = this.getAttributeValue('page', 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; }, / / scroll to a fixed position goTo (target) {let scrollT = document. The body. The scrollTop | | document. The documentElement. The 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. The documentElement. ScrollTop let step = math.h 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; ChangeScrollTop ()}, // nextPage nextPage() {let page = this.page; page = page < this.numPages ? page + 1 : this.numPages; this.page = page; This.changescrolltop ()}, // Jump to page pageChange() {let reg = /^[1-9]\d*$/ if (! Reg.test (this.inputPage)) {this.$message.error(' please enter the correct page number ') 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) }, GetAttributeValue (className, attr) {let pageDiv = document.querySelector('.' + className);  let attrsValue = getComputedStyle(pageDiv); Let attrVal = attrsValue[attr] return Number(attrval.substr (0, attrval.length-2)),}} </script>Copy the code

5. Set on pit

A. The seal does not show the problem

PDF preview Electronic seal shows problem solution

If (data.fieldType === "Sig") {data.fieldValue = null; / / comment out this line can display electronic signature under / / this. SetFlags (_util. AnnotationFlag. HIDDEN); } in node_modules/PDFJS - dist/es5 / build/PDF. The worker js comment out this line of code the if (data. The fieldType = = = "Sig") {data. FieldValue = null; Under / / comment out this line can display electronic signature / / _this3 setFlags _util. AnnotationFlag. (HIDDEN). }Copy the code

Node_modules after each NPM install, the modified code disappears. Directions Manually modify the dependency package (patch-package) in node_modules.

6. Summary

Code directions practice platform and PDF seal drag code and some other small plug-in use method, there is a need for small lovely people to pull their own. You can give a thumbs-up when you pass by