PDF电子签章，用鼠标拖动印章到指定的位置， 一种在网页PDF中电子签章定位方法

目录

 

一、需求

二、最后的效果

三、解决思路

---

一、需求

         在开发PDF电子签章（电子签名），后台用itextpdf进行签名，前台用pdf.js显示pdf文件，在前台用鼠标拖动印章到指定的位置，点击PDF后，获取鼠标点击坐标，将这个坐标转为itexpdf的坐标体系，然后插入图章。

二、最后的效果

三、解决思路

       这个问题困扰我一周，网上各种资料翻了个遍，都没有解决方案，实在没办法，读了pdf.js 的源码，了解在不同分辨率下，坐标的转换，有了以下思路。

  1、在html中，<iframe id='pdffile' src="" name="mainFrame" frameborder="1" width="100%" height="100%" scrolling="auto" noresize="noresize"> </iframe> 用来显示pdf文件，然后利用      viewer.html?file= + encodeURIComponent(src1); 的方式加载文件，这个可以去参考其他文章。

2、在js里，取得viewer里PDFviewer的宽度和高度，注意一下，这个高度是pdf文件的合计高度，比如PDF有10页，高度为7000，那么用这个高度除以总页数，就是每页在浏览器显示的高度了，这个数值是浏览器的坐标体系。方法很简单：

var iFrame = document.getElementById('pdffile'); 

PagesCount  =  $.session.get("PagesCount");//总页数

viewerContainer = iFrame.contentDocument.getElementById('viewer');

var previewheight  = $(viewerContainer).height();
var previewwidth =  $(viewerContainer).width();

previewheight = previewheight / PagesCount；

3、在viewer.js里，取pdf文档每页的宽度 pagewidth和高度pagehight，这个数值是pdf的坐标体系。这个需要viewer.js里取，然后传回到自己的js里。目的是点击pdf时，取点击页的宽度和高度，用来计算。

4、进行坐标转换计算，鼠标点击后，取得鼠标点击坐标。利用Pageheight / previewheight 计算出一个缩放比例，那么

           pdf的X坐标 = 鼠标点击的坐标(positionX) * 缩放比例 就可以了.当然要考虑超出pdf文档的范围,这个自己考虑下就好了，就是判断鼠标位置是否超出了pdf文档的宽度。

            var targetX = positionX * ( Pageheight / previewheight )

           pdf的Y坐标 就比较麻烦了，因为在pdf里，（0，0）是左下角，鼠标点击在网页时，(0,0）是左上角。所以 pdf的Y坐标的计算方法：

var mousepage =  Math.ceil(positionY/previewheight);//判断点击了第几页

var mouse_page_y =  previewheight *  mousepage -  positionY;//转换成点击pdf页的高度

var targetY  = mouse_page_y  * ( Pageheight / previewheight ) - dragImageHeight （dragImageHeight是图章的高度）

还有点小问题 就是如果把鼠标样式变成图章形状（圆形的），点击位置和显示位置有点微小差别，需要微调一下就好。

至此 大概的解决办法就完成了。