I have this code to generate a pdf using html2canvas and jspdf. I have header and footer in all pdf pages and signature in first page(only). I have two questions.
1- how can I move content to next pdf page when it reaches the signature area?
2- how can I add margin so that content doesn’t overlap with header and footer?.
here is the code

  const OpenPDF = () => {
const input = pdfRef.current;
if (!input) {
  return;
}

html2canvas(input, { scale: 1 }).then((canvas) => {
  // Reduce scale to 1
  const imgData = canvas.toDataURL("image/jpeg", 1); // Compress image using JPEG format with 100% quality
  const pdfWidth = 210;
  const pdfHeight = 297;
  const pdf = new jsPDF("p", "mm", [pdfWidth, pdfHeight]);

  const imgProps = pdf.getImageProperties(imgData);
  const imgWidth = pdfWidth;
  const imgHeight = (imgProps.height * pdfWidth) / imgProps.width;

  const footerHeight = 14;
  const signatureHeight = 50;
  const firstPageContentHeight = pdfHeight - footerHeight - signatureHeight;
  let position = 0;
  let pageCount = 1;

  if (imgHeight < pdfHeight) {
    pdf.addImage(imgData, "JPEG", 0, position, imgWidth, imgHeight); // Use JPEG format
  } else {
    let heightLeft = imgHeight;

    while (heightLeft > 0) {
      pdf.addImage(imgData, "JPEG", 0, position, imgWidth, imgHeight); // Use JPEG format
      heightLeft -= pdfHeight;
      position -= pdfHeight;

      if (heightLeft > 0) {
        pdf.addPage();
        pageCount++;
      }
    }
  }

  for (let i = 1; i <= pageCount; i++) {
    pdf.setPage(i);
    pdf.setFillColor("#00ABB6");
    pdf.rect(0, 0, pdfWidth, 5, "F");
  }

  const addSignatureBox = () => {
    const signatureHeight = 40;
    const footerHeight = 14;
    const pageHeight = pdf.internal.pageSize.height;
    const signatureY = pageHeight - footerHeight - signatureHeight;

    pdf.setPage(1);
    pdf.setFillColor("#E8F9FB");
    pdf.rect(0, signatureY, pdfWidth, signatureHeight, "F");

    pdf.setTextColor("#000000");
    pdf.setFontSize(10);
    pdf.text("Engineer Signature", 10, signatureY + 5);
    const engineerSignature = signature;

    pdf.addImage(engineerSignature, "PNG", 5, signatureY + 5, 60, 35);

    pdf.text("Name: Ahmed Engineer", 10, signatureY + 35);

    pdf.text("Client Signature", pdfWidth / 2, signatureY + 5);
    const clientSignature = signature;
    pdf.addImage(
      clientSignature,
      "PNG",
      pdfWidth / 2 - 5,
      signatureY + 5,
      60,
      35
    );
    pdf.text("Name: Ahmed Client", pdfWidth / 2, signatureY + 35);
  };

  addSignatureBox();

  for (let i = 1; i <= pageCount; i++) {
    pdf.setPage(i);
    pdf.setFillColor("#03BAC6");
    pdf.rect(0, pdf.internal.pageSize.height - 14, pdfWidth, 14, "F");
    pdf.setTextColor("#FCFCFC");
    pdf.setFontSize(10);
    pdf.text(
      "Powered by",
      pdfWidth / 2 - 20,
      pdf.internal.pageSize.height - 7,
      { align: "center" }
    );

    const logoSrc = whiteLogo;
    pdf.addImage(
      logoSrc,
      "PNG",
      pdfWidth / 2 - 10,
      pdf.internal.pageSize.height - 10,
      undefined,
      undefined
    );

    pdf.text(
      "UK Field Service",
      pdfWidth / 2 + 10,
      pdf.internal.pageSize.height - 7,
      { align: "center" }
    );
  }

  const todayDate = moment().format("YYYY-MM-DD");
  const pdfFileName = `WorkDocket_${job?.id}_${todayDate}.pdf`;
  pdf.save(pdfFileName);
  openPDFInNewWindow(pdf);
});

};