Question

如何使用html查找PDF元素坐标？我已经构建了一个显示pdf（iframe）的html页面，我想使用鼠标位置在pdf上找到x，y坐标？那可能吗？

这是我目前的程序：

在指定a时，使用ImageMagic将现有PDF文件转换为PNG {DPD} density。
将PNG显示为背景图像，同时为用户提供在该图像上创建矩形的选项[new divs]
将每个div的坐标[top / left]保存到数据库
使用FPDI and TCPDF将原始PDF作为模板创建PDF并将这些坐标应用于PDF，但它们位置不正确而不是直接放在PDF上。

我知道我保存的位置在pixels，而PDF库使用millimeters，但即使我进行转换，矩形位置也很差。

Answer 1

假设您可以使用* nix系统上提供的pdfinfo工具，您可以用点数确定PDF文件的大小

$ pdfinfo a.pdf
Creator:        Writer
Producer:       LibreOffice 5.1
CreationDate:   Tue Jan 23 19:45:15 2018
Tagged:         no
UserProperties: no
Suspects:       no
Form:           none
JavaScript:     no
Pages:          1
Encrypted:      no
Page size:      595 x 842 pts (A4)
Page rot:       0
File size:      36740 bytes
Optimized:      no
PDF version:    1.4

大小为WxH的PDF将以300DPI呈现给(W * 300 / 72)px x (H * 300 / 72)px。因此，上面的示例以300DPI呈现2479px x 3508px PNG。 请记住：如果计算结果为小数，则像素四舍五入为最接近的整数此处为单个像素，并且不应影响最终输出。

至于72来自哪里，请通过：https://graphicdesign.stackexchange.com/questions/5859/all-pdfs-appear-to-be-72-dpi-no-matter-what

找到相对于iframe的鼠标位置应该是一件容易的事。我没有回答那个部分，因为这个问题仅适用于转换。

Answer 2

根据你的评论，你在你的html中使用PNG图像来显示图像而不是直接显示pdf ...在这种情况下，最好的方法是使用html canva div然后使用像{{3}这样的东西获取鼠标坐标。

假设你的pdf中的左边距和上边距是并且保持常量，你需要在第一次手动比较pdf大小和图像大小，然后你可以使用javascript函数来转换＆＃34; 在canva内的鼠标位置＆＃34; to＆＃34; pdf文件中的预期位置＆＃34;，但在我看来，这绝对不是最好的方法。

为什么不使用this或viewerjs直接在html页面中显示PDF？（而不是将PDF转换为图像，然后显示图像文件）

Answer 3

我之前做过这个。不能为您提供任何代码，但一般来说，我使用的方法是使用数学公式使其全部工作。

例如，假设你有一个pdf矩形，顶部= 100，左边= 200.如果页面是8.5“x 11”页面，如果我的视口是10英寸宽，我可以左转换为矩形如下：

10 / 8.5 * pdf.left

Answer 4

您可以设置iframe位置绝对，然后将x，y鼠标pos - iframe pos转换为PDF左上角的原点坐标。我希望有所帮助！如果有滚动，则需要将其添加到滚动轴上的坐标。

Answer 5

我认为这会有所帮助。

HTML

<div id="DIV" ></div>
<iframe id="IFRAME">

</iframe>

CSS

* {
  padding: 0:
  margin: 0;
  }
#DIV {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: black;
  color: white;
  width: 100px;
  height:100px;
}
#IFRAME {
  position: absolute;
  top: 150px;
  left: 10px;
  background-color: black;
  color: white;
  width: 100px;
  height:100px;
}

的Javascript

(function() {
    var iframepos = $("#IFRAME").position();

    $('#IFRAME').contents().find('html').on('mousemove', function (e) { 
        var x = e.clientX + iframepos.left; 
        var y = e.clientY + iframepos.top;
        console.log('In Side IFRAME');
        console.log(x + " / " + y);
    });
        document.onmousemove = handleMouseMove;
        function handleMouseMove(event) {
            var dot, eventDoc, doc, body, pageX, pageY;

            event = event || window.event; // IE-ism

            // If pageX/Y aren't available and clientX/Y are,
            // calculate pageX/Y - logic taken from jQuery.
            // (This is to support old IE)
            if (event.pageX == null && event.clientX != null) {
                eventDoc = (event.target && event.target.ownerDocument) || document;
                doc = eventDoc.documentElement;
                body = eventDoc.body;

                event.pageX = event.clientX +
                  (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
                  (doc && doc.clientLeft || body && body.clientLeft || 0);
                event.pageY = event.clientY +
                  (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
                  (doc && doc.clientTop  || body && body.clientTop  || 0);
            }

            console.log(event.pageX + " / " + event.pageY);
            elementMouseIsOver = document.elementFromPoint(event.pageX, event.pageY);
            if(elementMouseIsOver){
                var theelement  = $("#"+elementMouseIsOver.id);

              if(elementMouseIsOver.tagName!= "HTML"){
                var offset = theelement.offset();
                console.log("element id : " + elementMouseIsOver.id);
                console.log("on element");
                console.log((event.pageX -  offset.left) + " / " + (event.pageY - offset.top));
              }
            }
        }
    })();

jsfiddle

像素到PDF坐标？

5 个答案: