Any way of converting react template into proper pdf?

Question

I'm currently working on a project that involves generating resume templates for PDF documents using the jsPDF library in JavaScript. I'm trying to add a consistent margin (specifically the bottom margin) to each page of the PDF, ensuring that the content does not touch the side of the page.

However, the methods I've attempted so far haven't provided the desired results. I've tried different approaches like setting a footer function and adjusting the position, but unfortunately, I'm not achieving the expected consistent bottom margin on all pages.

The issue seems to persist, and the content still touches the bottom of the pages. I'm seeking guidance on how to correctly add a consistent bottom margin to each page of the generated PDF using jsPDF.

I have tried using image-based approach and it worked but we don't want to use image-based approach because then the user will not be able to copy the resume content.

Are there alternative methods or best practices to achieve this consistently? I tried many below methods. check the code below this is the most appropriate code. now over here I am just not able to get the bottom margin in the pdf. So, the main problem is the bottom margin on the pdf.

import jsPDF from 'jspdf';
const handlePrint = () => {
    const pdf = new jsPDF({
      orientation: "portrait",
      unit: "mm",
      format: "a4",
      marginLeft: 10,
      marginRight: 10,
      marginTop: 10,
      marginBottom: 10,
    });

    const content =
      types?.doctype === "resume" ? Resumeref.current : Coverref.current;

    const fontSize = 12;
    console.log("Page height:", pdf.internal.pageSize.getHeight());

    // Calculate the zoom level to fit content within the page
    const pageWidth = pdf.internal.pageSize.getWidth() - 17; // Adjust for left and right margins
    const pageHeight = pdf.internal.pageSize.getHeight() - 20;
    console.log("Page height:", pageHeight);

    const contentWidth = content.clientWidth;
    const contentHeight = content.clientHeight;
    const scale = pageWidth / contentWidth;

    const bottomMargin = 10; // Setting bottom margin to 10mm
    const remainingSpace = pageHeight - contentHeight;

    // Set the font size and scale the content
    pdf.html(content, {
      x: 7,
      y: 7,
      html2canvas: { scale },
      callback: function (pdf) {
        const pageCount = pdf.internal.getNumberOfPages();

        for (let i = 1; i <= pageCount; i++) {
          pdf.setPage(i);

          // Add top margin to all pages
          pdf.text(" ", 10, 10);

          // Add bottom margin to all pages except the last one
          if (i < pageCount) {
            pdf.text(" ", 10, pageHeight - bottomMargin);
          }
        }

        pdf.save("document.pdf");
      },
    });
  };

Also if you have any other way, other library then too please suggest.