How to find a specific zone in the pdf and render some image at those exact coordinates.

[Xenope]

Hello guys,

need some help with a problem we have.

We generate some PDF with pupeeter based on some HTML templates. It could be invoices, quotes, reports ... anything.
Our goal is to be able to add a handwritten signature (consider it as an image representing it) at specific coordinates. (i.e. in a specific zone on the last page of the PDF).

How could we do that?

This is our approach :

• put a specific zone in the HTML template (could be a div, span anything)
• generate the PDF with pupeeter
• open it with PDF-lib and find the coordinates of this zone ( an HTML < div > in our example).
• put the image of the signature on this exact coordinates and save the PDF.

We have two problems:

• it's quite difficult to get our < div > in the PDF stream (we used a specific background color in order to find it).
• the coordinates we get from the PDF seems a little bit off. If we add a rectangle at that position it is not rendered were we want on that page. You can check it below : the x axis of the red square is returning the position 0 but when we draw a new rectangle at this position it looks like this :

It seems that the coordinates we get from the PDF does not take margin into accounts.
Some advices on this approach? Are we missing something?

Any help would be appreciated.

[BeWoFinum]

Hello @Xenope,
I hope you're well. We are trying to do the exact same thing. Did you find a solution to your problem?

[Xenope]

Hi,

In fact we did a while ago.

My colleague managed to address the problem, let me ask him with some details and i get back to you with some answers!

[Xenope]

Sorry for the delay, but here are some things that we did.

Place a div with a specific size in the HTML template.

Find this div position in the generated PDF document.
Apply some tricks to handle the correct position. (don't ask me much about how we found all those offsets).
Create a signature field (text field) at that position with a specific name in order to fill it afterwards.

In attachment you will find the TS class we implemented, I hope it will help you in some ways :
pdf-signature-service.txt

[BeWoFinum]

Hey thanks for the help!
In the meantime we found a similar solution, where we use a transparent 1x1px PNG and calculate it's position, we also published this as an npm-package if you're interested.
Thanks again!