PDFJS

src/plugins/HcPdfSign.js

@@ -14,6 +14,7 @@ export default class HcPdfSign {
     static signChange = null
     static pdfLoadFunc = null
     static batchSign = false
+    static signNum = 0
 
     /**
      * 初始化创建PDF预览
@@ -23,10 +24,7 @@ export default class HcPdfSign {
      * @param func  回调函数
      */
     static createPdf({ ele, url, img, change, load }) {
-        //初始化为空
-        this.disX = 0
-        this.disY = 0
-        this.curSignDom = null
+        this.initVarNull()
         //判断参数是否合法
         if (isNullES(ele)) {
             console.warn('请传入参数，必须是，ref的dom元素，或id值')
@@ -95,6 +93,22 @@ export default class HcPdfSign {
         }
     }
 
+    //初始化空值
+    static initVarNull() {
+        this.iframeDom = null
+        this.pdfViewer = null
+        this.signImgCss = {}
+        this.signType = ''
+        this.disX = 0
+        this.disY = 0
+        this.curSignDom = null
+        this.signList = []
+        this.signChange = null
+        this.pdfLoadFunc = null
+        this.batchSign = false
+        this.signNum = 0
+    }
+
     //设置回调事件
     static addEventFunc(func) {
         if (typeof func !== 'function') {
@@ -201,21 +215,82 @@ export default class HcPdfSign {
                 return
             }
             //鼠标位置
-            this.curSignDom.style.left = (event.clientX - this.disX) + 'px'
-            this.curSignDom.style.top = (event.clientY - this.disY) + 'px'
+            const left = (event.clientX - this.disX) + 'px'
+            const top = (event.clientY - this.disY) + 'px'
+            this.curSignDom.style.left = left
+            this.curSignDom.style.top = top
+            //批量处理
+            if (this.batchSign) {
+                const curDom = this.curSignDom
+                let curSign = this.getSignImgDom(curDom)
+                if (!curSign) return
+                const newArr = this.signList.filter(item => {
+                    return item.type === curSign.type
+                })
+                newArr.forEach(item => {
+                    item.dom.style.left = left
+                    item.dom.style.top = top
+                })
+            }
         })
         //鼠标抬起
         viewer.addEventListener('mouseup', () => {
             if (!this.curSignDom) return
             this.signType = '签名'
             this.curSignDom.style.cursor = 'default'
+            const curDom = this.curSignDom
+            //获取数据
+            let curSign = this.getSignImgDom(curDom)
+            if (!curSign) return
+            //计算坐标
+            const left = curDom.style.left.replace('px', '')
+            const top = curDom.style.top.replace('px', '')
+            const { width, height } = this.signImgCss
+            const lefts = Number(left) + Number(width / 2)
+            const tops = Number(top) + Number(height / 2)
+            const lx = ((lefts * 100) / curDom.parentNode.clientWidth).toFixed(4)
+            const ly = ((tops * 100) / curDom.parentNode.clientHeight).toFixed(4)
+            //批量处理
+            if (this.batchSign) {
+                const newArr = this.signList.filter(item => {
+                    return item.type === curSign.type
+                })
+                newArr.forEach(item => {
+                    item.lx = lx
+                    item.ly = ly
+                })
+            } else {
+                curSign.lx = lx
+                curSign.ly = ly
+            }
+            this.signChangeFunc()
         })
         this.pdfViewer = viewer
         //处理pdf渲染
-        setTimeout(async () => {
-            await this.setPageScrolling()
-            this.setPdfLoadFunc(true)
-        }, 500)
+        if (this.batchSign) {
+            setTimeout(async () => {
+                await this.setPageScrolling()
+                this.setPdfLoadFunc(true)
+            }, 500)
+        } else {
+            setTimeout(async () => {
+                this.setPdfLoadFunc(true)
+            }, 100)
+        }
+    }
+
+    //获取签章图片的数据
+    static getSignImgDom(curDom) {
+        const id = curDom.getAttribute('id')
+        let curSign = null
+        for (let i = 0; i < this.signList.length; i++) {
+            const item = this.signList[i]
+            if (item.id === id) {
+                curSign = item
+                break
+            }
+        }
+        return curSign
     }
 
     //页面被点击
@@ -230,13 +305,11 @@ export default class HcPdfSign {
             return
         }
         //批量签章
+        this.signNum ++
         if (this.batchSign) {
             const parent = target?.parentNode?.parentNode?.children ?? []
             for (let i = 0; i < parent.length; i++) {
-                const textLayer = parent[i]?.children[1]
-                if (textLayer) {
-                    await this.setPdfNodeSign(parent[i], textLayer, event)
-                }
+                await this.setPdfNodeSign(parent[i], parent[i]?.children[1], event)
             }
             this.signChangeFunc()
         } else {
@@ -247,6 +320,9 @@ export default class HcPdfSign {
 
     //设置PDF节点签章
     static async setPdfNodeSign(node, textLayer, event) {
+        if (isNullES(node) || isNullES(textLayer) || isNullES(event)) {
+            return
+        }
         if (node.children.length < 3) {
             node.prepend('<div class="signLayer" style="position: absolute;height: 100%;width: 100%;z-index: 999;pointer-events: none;overflow: hidden"></div>')
         }
@@ -264,13 +340,14 @@ export default class HcPdfSign {
         })
         //保存签章信息
         this.signList.push({
-            x: ((event.layerX * 100) / textLayer.clientWidth).toFixed(4),
-            y: ((event.layerY * 100) / textLayer.clientHeight).toFixed(4),
+            type: this.signNum,
+            url: this.signImgCss?.url ?? '',
             page: node.getAttribute('data-page-number'),
             id: signImgDom.getAttribute('id'),
+            lx: ((event.layerX * 100) / textLayer.clientWidth).toFixed(4),
+            ly: ((event.layerY * 100) / textLayer.clientHeight).toFixed(4),
             dom: signImgDom,
         })
         return signImgDom
     }
-
 }