How do we set Position for Signature PlaceHolder For Dynamic PDF.

[itsdun1]

Hi I am trying to add signature text in PDF but I am unable to place the visible signature in the correct position. Please help me with it.

[pankucsi]

Helo,

Can you explain your issue(s) with the positioning ? If you have a look at on of our tests, you can find the use cases how to use pdf-signer.

 const signatureOptions: SignatureOptions = {
      reason: '2',
      email: '[email protected]',
      location: 'Location, LO',
      signerName: 'Test User',
      annotationAppearanceOptions: {
        signatureCoordinates: { left: 0, bottom: 700, right: 190, top: 860 },
        signatureDetails: [
          {
            value: 'Signed by: Kiss Béla',
            fontSize: 7,
            transformOptions: { rotate: 0, space: 1, tilt: 0, xPos: 20, yPos: 20 },
          },
          {
            value: 'Date: 2019-10-11',
            fontSize: 7,
            transformOptions: { rotate: 0, space: 1, tilt: 0, xPos: 20, yPos: 30 },
          },
        ],
      },
    }

[itsdun1]

@pankucsi Thanks For the reply. Amazing library. I have created my pdf with pdf-make. I am trying to add digital signatures on pre-created PDF.

1. How is left bottom right top params ({ left: 0, bottom: 700, right: 190, top: 860 }) differ from params provided by pdfMake. (x1: 0, y1: 20, x2: 350, y2: 20)
2. Can we use relative positioning here. ie. '3%'.
3. Can we Insert an Image In place of digital signature placeholder.

Can you share code snippet where positioning is handled if possible.

[itsdun1]

@pankucsi

[itsdun1]

Please help

[pankucsi]

I dont know how pdfMake works. I cant help you with compare these things.

As you can see in the code snipets what i posted, you can positionig the whole 'signature box' with the signatureCoordinates property.

We have never tried positioning with percentage, give it a try.

And yes you can place an image into the signature. As I mentioned earlier please have a look at our test cases and you will find everything what you can achive with this library.

[kiranbangar5946]

For positioning and dynamic binding of image based on keyword you can extract coordinates of keyword from pdf using "pdf.js-extract" npm. Further use this coordinates and do some tweaks and add it to right left bottom top. Can refer this. const pdfExtract = new PDFExtract(); const options: PDFExtractOptions = {}; /* see below */ const extractedPdf = await pdfExtract.extract(${process.cwd()}/demo.pdf, options) const coordinateData: any = extractedPdf.pages.reduce((eobj, e) => { return (e.content.reduce((newObj, c) => { if (c.str.includes('MyUserName')) { newObj.textInfo = c; newObj.mainPageInfo = e.pageInfo } return newObj; }, { mainPageInfo: {}, textInfo: {} })) }, {});

    if (!coordinateData.textInfo.str) {
        return res.status(500).json({
            message: 'Coordinates not found'
        });
    }

    //set coordinates for digital signature
    const textX = coordinateData.textInfo.x;
    const textWidth = coordinateData.textInfo.width;
    const textY = coordinateData.textInfo.y;
    const pageX = coordinateData.mainPageInfo.width;
    const pageY = coordinateData.mainPageInfo.height;
    const pageNumber = coordinateData.mainPageInfo.num - 1;
    const left = 0;
    const right = Math.floor(pageX - (textX + textWidth));
    const bottom = Math.floor(pageY - textY + 75);
    const top = Math.floor(bottom - 125);