vue+pdf.js 印章签署完后鼠标滑过显示签章信息
效果图
核心思想:
pdf.js签署印章,搜索相关文档就好
签署完后,每一页可能有多个印章,将这些印章跟随鼠标移动显示印章信息
首先思考将这些印章的提示信息放在生成的div中,然后添加鼠标移动事件,根据页数和鼠标移动的坐标判断是否经过了某一页的印章
核心代码
if(this.sginData!=null){ for(var key in this.sginData){ console.log('kye====', key) for(var i=0 ; i < this.sginData[key].length; i++){ var divE = document.createElement('div') //创建div var divId = document.createAttribute("id") //创建属性 var divIdClass = document.createAttribute("class") //创建属性 divId.value = 'mouse'+this.sginData[key][i].page+[i] //设置属性值 divIdClass.value = 'normal2' divE.setAttributeNode(divId) //给div添加属性 divE.setAttributeNode(divIdClass) //给div添加属性 let ele = document.getElementById((this.sginData[key][i].page+1).toString()) if (ele) ele.appendChild(divE) // document.getElementById((sginData[key][key].page+1).toString()).appendChild(divE) divE.style='background-color:#666;border:1px solid #666;position: absolute;\n' + ' opacity: 0.9;\n' + ' color: white;\n' + ' border-radius: 5px;\n' + ' padding: 20px;\n' + ' overflow: hidden;\n' + ' display: none;\n' + ' z-index: 99;\n' + ' background-color: #666;\n' + ' border: 1px solid #f7f7f7;' var html ='<div style="background-color:red;text-align:center"></div><div style="text-align: left"><span style="font-weight: bold">签章人</span>:'+this.sginData[key][i].userName+'</br><span style="font-weight: bold">签章名称:</span>'+this.sginData[key][i].sealName+'</br><span style="font-weight: bold">签章日期:</span>'+this.sginData[key][i].signedTime+'</div>' divE.innerHTML = html }
鼠标移动事件
changeActive($event,page){ console.log('移入X:'+$event.offsetX+"Y:"+$event.offsetY) // var showDiv = document.getElementById('mouse') //遍历签章信息 var sginData2 = { "0": [ { "id": "402883c273e5aa5b0173e5adb6b30001", "taskId": "ff80818173e58df10173e5adb3ca000a", "sealId": "4028832470e1725d0170e1c0817a0004", "sealName": "测试印章1", "userName": "刘革1", "signedTime": "2020-08-13 10:37:13", "createTime": "2020-08-13 10:37:13", "createMilliSecond": 1597286233774, "page": 0, "x": 263, "y": 190, "width": 127.559, "height": 127.559, "pageWidth": 595.32, "pageHeight": 841.92, "widthScale": 0.21427, "heightScale": 0.15151, "xscale": 0.441779, "yscale": 0.225675 }, { "id": "402883c273e5aa5b0173e5aef36e0005", "taskId": "ff80818173e58df10173e5adb3ca000a", "sealId": "4028832470e1725d0170e1c0817a0004", "sealName": "测试印章2", "userName": "刘革2", "signedTime": "2020-08-13 10:38:34", "createTime": "2020-08-13 10:38:34", "createMilliSecond": 1597286314860, "page": 0, "x": 363, "y": 476, "width": 127.559, "height": 127.559, "pageWidth": 595.32, "pageHeight": 841.92, "widthScale": 0.21427, "heightScale": 0.15151, "xscale": 0.609756, "yscale": 0.327822 } ], "1": [ { "id": "402883c273e5aa5b0173e5b0526f0009", "taskId": "ff80818173e58df10173e5adb3ca000a", "sealId": "4028832470e1725d0170e1c0817a0004", "sealName": "测试印章3", "userName": "刘革3", "signedTime": "2020-08-13 10:40:04", "createTime": "2020-08-13 10:40:04", "createMilliSecond": 1597286404716, "page": 1, "x": 263, "y": 190, "width": 127.559, "height": 127.559, "pageWidth": 595.32, "pageHeight": 841.92, "widthScale": 0.21427, "heightScale": 0.15151, "xscale": 0.450178, "yscale": 0.281499 } ] } // for(let i = 0 ; i < sginData.length; i ++){ //拿到印章信息进行遍历显示 for(var key in this.sginData){ for(var i = 0 ; i < this.sginData[key].length ; i ++){ if(page == this.sginData[key][i].page+1){ var showDiv = document.getElementById('mouse'+(page-1).toString()+(i).toString()) // this.sginData[key][i].width = 200 if($event.offsetX < (this.sginData[key][i].x * this.scale +(this.sginData[key][i].width )) && $event.offsetX > this.sginData[key][i].x && $event.offsetY < (this.sginData[key][i].y * this.scale+(this.sginData[key][i].width )) && $event.offsetY > this.sginData[key][i].y ){ console.log('移入X:'+$event.offsetX+"Y:"+$event.offsetY) if(showDiv) showDiv.style.left = $event.offsetX+30+'px'//($event.pageX-150) + 'px' showDiv.style.top = $event.offsetY-40+'px'//($event.pageY-80) + 'px' showDiv.style.display = 'block' }else{ if(showDiv) showDiv.style.display = 'none' } } } }
}