从嵌入的pdf对象元素中获取鼠标坐标
我已经做了几个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索引，看看它是否解决了问题，但理想情况下，我可以使用一个直接与pdf一起工作的解决方案。我对pdf的表达方式并不看重，所以如果有更好的方法，我会全神贯注的！
回答 1
Stack Overflow用户
发布于 2020-12-02 21:25:41
我遇到了一个类似的问题，试图获得一个元素被放在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);
}https://stackoverflow.com/questions/61666513
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号