前端js给pdf文件添加印章，前端使用PDF.js获取pdf文件的坐标位置，后端使用C# iTextSharp

老年新手一枚，一直以来都是在网上cv大神们的代码。内心既感激又崇拜。最近在工作中遇到一个问题，需要在电子文档里添加印章，所以，开始接触到pdf.js插件。

PDF.js 官网：PDF.js。

百度了一下，找到第一种方法是通过获取点击点的标签文本，然后后台使用iTextSharp通过关键字查询获取关键词坐标点。这种办法虽可实现功能，但是缺点是非常不灵活，体验也不好。

所以长时间研究查询后，决定在通过获取鼠标点击点相对于pdf文档的坐标来实现项目要求。

如何使用pdf.js打开文档等相关操作，这里不做赘述。

直接进入主题，使用pdf.js的默认展示页面viewer.html打开一个文档后，查看源码找到id="viewerContainer"的元素标签，仔细观察发现pdf文件的每一页内容对应一个class="page"的标签，而每一个page标签下有一个class="canvasWrapper"的元素（里面包含一个canvas元素和一个class="textLayer"的div元素）。注意每个元素的属性，这些属性可以帮助我们更容易获取到坐标。

在class="textLayer"的元素里，pdf文档的每段内容都是一个span元素，元素中有role="presentation"的属性，style样式中有left和top两个属性，并且是百分比值。如下图。

当鼠标点击事件的target元素是role="presentation"的span元素时，直接获取style的left和top属性值即可。这也就大概获取到了鼠标点击点相对于pdf页左上角的坐标。

当点击到pdf页的空白位置时，则需要通过点击事件的target元素的offsetWidth ，offsetHeight属性来获取坐标值，再除以class="textLayer"的元素的宽高获取坐标百分比。

鼠标点击点的坐标已获取到，那么通过iTextSharp在坐标点添加印章则水到渠成。

另外需要注意的是在js中坐标原点为左上角，而iTextSharp中，坐标原点为左下角。因此，在前端js中获取到的纵坐标需要使用差值。

好的，第一次发表文章，希望对大家有些帮助，若有更好的方法，希望能不吝赐教。大家一起进步。能混到一口更好的饭。哈哈。

本文为原创，如需转载，请注明作者及出处。