10

I'm really curious as to how sites like RightSignature and PandaDoc provide the drag and drop capability on a PDF. Basically, you upload a PDF to their site, then they display the PDF in a window (all the pages -- scrollable), then they have a panel on the side of the PDF viewer that has one to many form fields in it and the site allows you to drag those fields onto the PDF as placeholders.

I get that they are basically just recording the X/Y coordinates of where the form element is being placed. But how do are they actually accomplishing this from a technical perspective?

I know how to handle the PDF upload. I just don't know how to display the PDF and basically create an overlay that allows the user to drag fields onto it and record the x,y coordinates. This way when I want to create a version of that template, I know where to put the fields on the PDF.

2
  • 1
    You can use JavaScript to make the drag/drop functionality no problem. JQuery makes pretty easy, actually. Once the user drags things on to your 'canvas' they would basically click a button to 'save' their layout. You would then use that event handler to capture what they did and do whatever you want with it.
    – mwilson
    Commented Aug 11, 2015 at 2:47
  • Did you ever find a solution?
    – nullable
    Commented Feb 4, 2017 at 18:30

1 Answer 1

23

Even if this question is quite old, I share my solution realized using the following libraries:

  • pdf.js (that renders a PDF file as an HTML component allowing the capturing of coordinates)
  • interact.js (for the drag and drop of placeholders)

Check my solution pushed to GitHub https://github.com/ValerioEmanuele/drag-and-drop-placeholders-into-PDF

5
  • Good way. Thanks. I'm trying to get the co-ordinates from your example and trying to use it with FPDI to generate watermark over the PDF. Could you please tell if there is any relation between X - Y positions of pdfjs and fpdi co ordinate? Thanks. Commented Sep 2, 2020 at 8:41
  • Could you please check this ? github.com/ValerioEmanuele/drag-and-drop-placeholders-into-PDF/… Commented Sep 5, 2020 at 6:45
  • Sorry to bump this, but any idea how can I save back the pdf from pdfjs after placing the placeholders?
    – aaa111
    Commented Sep 23, 2022 at 22:45
  • 1
    @aaa111 you'll have to convert the javascript coordinates into PDF coordinates. Please, take a look at this article ("Implement a coordinate conversion function" section) to see the differences between the two coordinates valerioemanuele.tech/… Commented Sep 26, 2022 at 12:13
  • @Valerio Thanks for the reply. I think I have found a away to modify the pdf based on your solution, I am using pdflib, where I am just putting the required thing based on the coordinates and render the modified pdf again in pdfjs.
    – aaa111
    Commented Sep 26, 2022 at 13:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.