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

Question

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

因此，为了让事情变得更简单，我尝试在 ASP.NET 中构建一个可视化编辑器来获取这些坐标。目前的想法是将 pdf 文件嵌入到元素的数据属性中<object>，然后单击并拖动鼠标来选择新字段的区域。

我遇到的问题是该<object>元素的工作方式似乎很像 iframe，因为我无法访问其中的任何事件。

例如：

理论上，当在 .txt 文件中单击时，以下页面应该给出 X 和 Y 坐标<object>。如果在加载之前快速单击，您将获得封装 .div 的结果<object>。然后，一旦 pdf 加载完毕，就不会再发生任何事情。

表单生成器.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>
}

AdminController.cs

public ActionResult GetPdfForm()
{
    var fileName = Server.MapPath(ORIGINAL_FORM_V65);

    var fs = System.IO.File.ReadAllBytes(fileName);

    return File(fs, "application/pdf", null);
}

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

1. 是否已经有针对此类事情的最佳实践，甚至是图书馆？
2. 如果 object 元素像 iframe 一样不可访问，是否可以覆盖 div 来代替？

我暂时会尝试使用 z 索引，看看是否可以解决问题，但理想情况下我可以使用直接与 pdf 配合使用的解决方案。我并不关心 pdf 的呈现方式，所以如果有更好的方法，我洗耳恭听！

Answer 1

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

请注意，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);
  }