Javascript 从嵌入的pdf对象元素获取鼠标坐标

我制作了一些PDF编辑器，您可以填写ASP.NET表单，然后填充PDF供您下载。目前，文本输出的所有坐标都必须通过反复试验手动输入，这远远不够理想

所以，为了让事情变得简单一点，我正在尝试在ASP.NET中构建一个可视化编辑器来获取这些坐标。目前的想法是将pdf文件嵌入

元素的数据属性中，然后单击并拖动鼠标为新字段选择一个区域

我遇到的问题是，

元素的工作方式很像iframe，因为我无法访问其中的任何事件

例如：

理论上，当在

中单击时，下页应给出X和Y坐标。如果在加载之前快速单击，则会得到封装

的div的结果。然后，一旦pdf加载完毕，就不会再发生任何事情

Formbuilder.cshtml

<h2>Form Builder Prototype</h2>
<p id="demo"></p>


<div class="embed-responsive embed-responsive-16by9" onclick="showCoords(event)">

    <object class="embed-responsive-item" data="@Url.Action("GetPdfForm", "admin")" type="application/pdf" width="100%" height="100%">
        Click @Html.ActionLink("here", "GetPdfForm", "admin") to view the file.
    </object>

</div>


@section Scripts    {
    <script>
        function showCoords(event) {
            console.log(event);
            var x = event.clientX;
            var y = event.clientY;
            var coor = "X coords: " + x + ", Y coords: " + y;
            document.getElementById("demo").innerHTML = coor;
        }

        function clearCoor() {
            document.getElementById("demo").innerHTML = "";
        }
    </script>
}

所以，我想问你的问题是：

对于这样的事情，是否已经有了一个最佳实践，甚至是一个图书馆

如果对象元素像iframe一样不可访问，那么是否可以覆盖div呢

---

我将暂时玩一玩z索引，看看这是否解决了问题，但理想情况下，我可以使用直接与pdf一起工作的解决方案。我不知道pdf是如何呈现的，所以如果有更好的方式，我会洗耳恭听

我在尝试获取pdf文件中元素的放置位置时遇到了类似的问题。最好的解决方案似乎是Mozilla的库

请注意，PDF中的坐标和浏览器中的坐标是不同的：在PDF中，0,0位于左下角，而在DOM中，0,0位于左上角。你可以阅读更多关于这方面的内容

检查此样本以获取位置

 function dragMoveListener (event) {
    var target = event.target,
        // keep the dragged position in the data-x/data-y attributes
        x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
        y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

    // translate the element
    target.style.webkitTransform =
    target.style.transform ='translate(' + x + 'px, ' + y + 'px)';

    // update the posiion attributes
    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
  }

---

我在尝试获取pdf文件中元素的放置位置时遇到了类似的问题。最好的解决方案似乎是Mozilla的库

请注意，PDF中的坐标和浏览器中的坐标是不同的：在PDF中，0,0位于左下角，而在DOM中，0,0位于左上角。你可以阅读更多关于这方面的内容

检查此样本以获取位置

 function dragMoveListener (event) {
    var target = event.target,
        // keep the dragged position in the data-x/data-y attributes
        x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
        y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

    // translate the element
    target.style.webkitTransform =
    target.style.transform ='translate(' + x + 'px, ' + y + 'px)';

    // update the posiion attributes
    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
  }