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

【问题标题】：Getting mouse coordinates from an embedded pdf object element从嵌入的 pdf 对象元素中获取鼠标坐标
【发布时间】：2020-08-23 06:20:24
【问题描述】：

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

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

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

例如：

理论上，在<object> 内单击时，以下页面应给出 X 和 Y 坐标。如果您在加载之前快速单击，您将获得封装<object> 的 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>
}

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);
}

所以，我的问题是：

是否有针对此类事情的最佳实践，甚至是库？
如果对象元素像 iframe 一样不可访问，是否可以覆盖 div 代替？

我将暂时使用 z-indexes，看看是否可以解决问题，但理想情况下，我可以使用直接与 pdf 一起使用的解决方案。我并不看重 pdf 的呈现方式，所以如果有更好的方法，我会全力以赴！

【问题讨论】：

标签： javascript html asp.net pdf coordinates

【解决方案1】：

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

请注意，PDF 中的坐标和浏览器中的坐标不同：pdf 中的 0,0 位于左下角，而 DOM 中的 0,0 位于左上角。你可以阅读更多关于这个here的信息。

查看此code 示例以获得该位置。

 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);
  }

【讨论】：