Create a pdf with a bot adding an image of a signature

[Buca]

Hello, I’m creating an application to generate purchase orders. I’ve created a template, although it’s not very polished due to the limitations of Google Docs. One issue I have is adding the image of the approver’s signature — it appears too large. I placed it inside a table in the Google Doc, but it still looks oversized.
What can I do to make it appear correctly?

Is there another way to generate the PDF and then overlay the signature on the already-created PDF using an Apps Script? Would that be easier?

[PauloExpert]

You're on the right track! Using Google Apps Script to overlay the signature onto the generated PDF can indeed simplify the process. Here's how you can approach this problem:

---

Option 1: Resize the Image in Google Docs

1. Manually Resize the Image:

   • In Google Docs, click on the image of the signature.
   • Drag the corners to reduce its size. If you want to preserve the aspect ratio, hold the Shift key while resizing.

2. Use Apps Script to Resize Automatically: If the signature is inserted dynamically using Apps Script, you can resize it with the following code:

   function insertSignature(docId, imageBlob) {
     const doc = DocumentApp.openById(docId);
     const body = doc.getBody();
   
     // Add the image
     const image = body.appendImage(imageBlob);
   
     // Resize the image
     image.setWidth(150); // Set desired width
     image.setHeight(50); // Set desired height
   
     doc.saveAndClose();
   }

---

Option 2: Overlay Signature on PDF with Apps Script

If you want to overlay the signature on a PDF after generating it, follow these steps:

1. Generate the PDF: Use Apps Script to convert the Google Doc to a PDF:

   function generatePdf(docId) {
     const doc = DocumentApp.openById(docId);
     const pdfBlob = doc.getAs('application/pdf');
     return pdfBlob;
   }

2. Overlay the Signature: Use the Advanced Drive Service to manipulate the PDF. Unfortunately, Apps Script doesn't natively support advanced PDF manipulations like overlays, so you can:

   • Use a library like PDF-Lib or PDF.js to overlay the signature image (requires a third-party setup).
   • Integrate with an external service like DocuSign or PDF.co for complex PDF manipulations.

Here’s a simplified example using an external tool like PDF.co:

function overlaySignature(pdfBlob, signatureImageBlob) {
  const url = "https://api.pdf.co/v1/pdf/edit/add";
  const payload = {
    url: "YOUR_PDF_FILE_URL",
    annotations: [{
      "type": "image",
      "x": 100, "y": 200, // Position
      "width": 100, "height": 50, // Size
      "image": signatureImageBlob.getBytes() // Base64 encode the image if needed
    }]
  };

  const options = {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "x-api-key": "YOUR_API_KEY"
    },
    payload: JSON.stringify(payload)
  };

  const response = UrlFetchApp.fetch(url, options);
  Logger.log(response.getContentText());
}

---

Option 3: Use Google Slides

Google Slides offers better control over positioning and resizing of images. You can:

1. Design the template in Google Slides.
2. Dynamically add text and images using Apps Script.
3. Export the final result as a PDF.

Here’s an example:

function generatePurchaseOrder(slideId, signatureBlob) {
  const slide = SlidesApp.openById(slideId);
  const slidePage = slide.getSlides()[0];

  // Add signature image
  const image = slidePage.insertImage(signatureBlob);
  image.setWidth(150); // Adjust size
  image.setHeight(50);
  image.setLeft(200); // Position
  image.setTop(400);

  // Export as PDF
  const pdfBlob = slide.getAs('application/pdf');
  const file = DriveApp.createFile(pdfBlob);
  Logger.log('PDF created: ' + file.getUrl());
}

---

Recommendation

For the best results:

1. If you’re comfortable with simple fixes, resize the signature in Google Docs.
2. If precise positioning is critical, overlay the signature on the PDF using Apps Script or Google Slides.
3. Use third-party APIs for advanced PDF manipulations if needed.

Let me know if you need further clarification!