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'
        }
      }
    }

  }

｝