const savePDF = () => {
    var HTML_Width = document.querySelector("#appp").clientWidth;
    var HTML_Height = document.querySelector("#appp").clientHeight;
    var top_left_margin = 0;
    var PDF_Width = HTML_Width + top_left_margin * 2;
    var PDF_Height = PDF_Width * 1.5;
    var canvas_image_width = HTML_Width;
    var canvas_image_height = HTML_Height;
    var totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;

    html2canvas(document.querySelector("#appp"), {
      useCORS: true,
      scale: 1.8
      // allowTaint: true
    }).then(function (canvas) {
      canvas.getContext("2d");

      let img = new Image();
      //@ts-ignore
      img.src = canvas.toDataURL("image/png");
      var pdf = new jsPDF("p", "pt", [PDF_Width, PDF_Height]);
      // var pdf = new jsPDF("p", "pt", [PDF_Width, PDF_Height]);
      pdf.addImage(
        img,
        "JPG",
        top_left_margin,
        top_left_margin,
        canvas_image_width,
        canvas_image_height
      );
      pdf.save("HTML-Document.pdf");
    });
  };

  return (
    <div onClick={() => closeModal()} className="fixed inset-0 flex items-center justify-center z-50 bg-opacity-30 bg-black backdrop-blur-[3px]">
      <button onClick={savePDF}>Generate PDF</button>

      <div id="appp" style={{ width: 800 }} className='bg-white'>
        <div className="flex items-center gap-2">
          <img src={Email} />
          <span>Hello</span>
        </div>
      </div>
    </div>
  )