javascript - Getting mouse coordinates from an embedded pdf object element - Stack Overflow

admin管理员组

文章数量:1332896

I've made a few PDF editors for which you fill in an ASP.NET form and it populates the PDF for you to download. Currently, all of the coordinates for text output have to be entered manually by trial and error, which is far from ideal.

So, to make things a bit easier I'm trying to build a visual editor in ASP.NET for getting those coordinates. Currently, the idea is to embed a pdf file into the data attribute of an <object> element and click-and-drag the mouse to select an area for a new field.

The problem I'm having is that the <object> element seems to work much like an iframe in that I can't access any of the events within it.

For example:

The following page should theoretically give the X and Y coordinates when clicked within the <object>. If you rapidly click before its loaded you get the result for the div encapsulating the <object>. Then, once the pdf has loaded nothing further happens.

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

So, my questions for you are:

1. Is there a best practice, or even a library, already in place for such a thing?
2. If the object element is inaccessible like an iframe, would it be possible to overlay a div instead perhaps?

I'm going to have a play with z-indexes for the time being and see if that solves the problem, but ideally I could do with a solution that works with the pdf directly. I'm not precious about how the pdf is presented, so if there's a better way of doing it I'm all ears!

I've made a few PDF editors for which you fill in an ASP.NET form and it populates the PDF for you to download. Currently, all of the coordinates for text output have to be entered manually by trial and error, which is far from ideal.

So, to make things a bit easier I'm trying to build a visual editor in ASP.NET for getting those coordinates. Currently, the idea is to embed a pdf file into the data attribute of an <object> element and click-and-drag the mouse to select an area for a new field.

The problem I'm having is that the <object> element seems to work much like an iframe in that I can't access any of the events within it.

For example:

The following page should theoretically give the X and Y coordinates when clicked within the <object>. If you rapidly click before its loaded you get the result for the div encapsulating the <object>. Then, once the pdf has loaded nothing further happens.

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

So, my questions for you are:

1. Is there a best practice, or even a library, already in place for such a thing?
2. If the object element is inaccessible like an iframe, would it be possible to overlay a div instead perhaps?

I'm going to have a play with z-indexes for the time being and see if that solves the problem, but ideally I could do with a solution that works with the pdf directly. I'm not precious about how the pdf is presented, so if there's a better way of doing it I'm all ears!

• javascript
• html
• asp
• pdf
• coordinates

Share Improve this question Follow asked May 7, 2020 at 19:49 DezzamondoDezzamondo 2,31822 gold badges2323 silver badges3535 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

I had a similar problem trying to get the position where an element was dropped over a pdf file. The best solution seems to be the library pdf.js from Mozilla.

Note that coordinates in PDF and coordinates in browsers are different: in pdf 0,0 is at the left bottom corner, and in DOM 0,0 is at the left up corner. You can read more about this here.

Check this code sample getting the position.

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

本文标签： javascriptGetting mouse coordinates from an embedded pdf object elementStack Overflow