production/Vue/Contrat/index.php

<style>
    #loader-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  top: 0;
  left: 0;
  display: none;
}

#loader {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}
/* td,th{
	text-align: center;
} */

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
  </style>

<div id="loader-wrapper">
  <div id="loader"></div>
</div>

<?php $this->titre = "Tâches - Editions contrats";
	$dateAvenant = $_SESSION['dateAvenant_C'];
	?>




<legend><?= _("EDITION CONTRAT") . " : " . $this->nettoyer($_SESSION['numeroPolice_C'])?> </legend>
	

<table class="table table-bordered table-responsive table-condensed" style='font-size:12pt; text-align:center'>
	<td width="10%" align="center" class="required"> <?= _("Avenant") ?> </td>
	<td style='font-size:14pt;'>
		<SELECT style='font-size:10pt; font-weight:bold;' class="form-select" id="idAvenant" NAME="idAvenant" onChange="avenantimprimer_cp;"required>
			<?php liste_options($avenant,""); ?>						
		</SELECT>	
	</td>
	<td width="6%" > <?= _("Période du") ?> </td>
	<td  > <INPUT style='text-align:center; font-size:10pt;'  class="form-control datepicker" TYPE="text" id="debutStat" NAME="debutStat" value="<?=date('d/m/Y') ?>" > </td>

	<td align="center" width="3%"> <?= _("au") ?> </td>
	<td  > <INPUT style='text-align:center; font-size:10pt;'  class="form-control datepicker" TYPE="text" id="finStat" NAME="finStat" value="<?=date('d/m/Y') ?>" > </td>

	</table>
	<button class="btn btn-primary" onClick="export_pdf_html2pdf()">Exporter adherants</button>
<div class="row">
<div class="container mt-3 mb-4" >
<div class="col-lg-12 mt-4 mt-lg-0">
    <div class="row">
      <div class="col-md-12">
        <div class="user-dashboard-info-box table-responsive mb-0 bg-white p-4 shadow-sm">
          <table class="table mb-0" id="exportId">
            <thead>
              <tr>
                <th>Nom</th>
                <th >Prenoms</th>
                <th >Sexe</th>
                <th >Naissance</th>
                <th >Groupe sanguin</th>
                <th >Nombre enfants</th>
                <th >Contact</th>
                <th >Mail</th>
              </tr>
            </thead>
            <tbody style="font-size:12px">
			<?php
				//   var_dump($adherents);
				  foreach($adherents as $key => $value){
					// echo $adherent['id'];
					// echo $adherent['codeSociete'];
				  ?>
              <tr class="candidates-list">
                <td class="title">
                  <?= $value['nom']; ?>
                </td>
                <td class="candidate-list-favourite-time text-center">
				<?= $value['prenoms']; ?>
                </td>
                <td>
				<?= $value['sexe']; ?>
                </td>
				<td>
				<?= $value['dateNaissance']; ?>
                </td>
				<td>
				<?= $value['codeGroupeSanguin']; ?>
                </td>
				<td>
				<?= $value['nombreEnfants']; ?>
                </td>
				
				<td>
				<?= $value['telephonePortable']; ?>
                </td>
				<td>
				<?= $value['email']; ?>
                </td>
              </tr>

			  <?php 
			 	} 
			  ?>
              
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

	

<script>

function showLoader() {
    document.getElementById('loader-wrapper').style.display = 'flex';
  }

  // Hide loader after PDF generation
  function hideLoader() {
    document.getElementById('loader-wrapper').style.display = 'none';
  }


	function export_pdf_html2pdf()
	{
		// alert('hello')
		hideLoader()
		showLoader()
		var pdfOptions = {
		// margin: [10, 10], // [top, bottom]
		filename: 'example.pdf',
		// image: { type: 'pdf', quality: 0.9 },
		image: {type: 'jpeg',quality: 1.0},
		// html2canvas: { scale: 2 },
		html2canvas: {dpi: 75, scale: 2, letterRendering: true},
		// jsPDF: { unit: 'mm', format: 'a4', orientation: 'landscape' },
		jsPDF: {orientation: 'portrait', unit: 'in', format: 'a4', compressPDF: true},
		// pagebreak: { before: '.page-break' },
		pagebreak: { mode: ['avoid-all', 'css', 'legacy'] },
		// header: {
		// height: 10, // Set the height of the header
		// contents: function (pageNumber, pageCount) {
		// 	// Custom header content
		// 	return '<div style="text-align: center;">Header - Page ' + pageNumber + ' of ' + pageCount + '</div>';
		// }
		// },
		// footer: {
		// height: 10, // Set the height of the footer
		// contents: function (pageNumber, pageCount) {
		// 	// Custom footer content
		// 	return '<div style="text-align: center;">Footer - Page ' + pageNumber + ' of ' + pageCount + '</div>';
		// 	}
		// }
		};
			var element=document.getElementById('exportId')                       // Start page numbering at 3 instead of 1
			html2pdf(element,pdfOptions).then(function(pdf) {
				// var totalPages = pdf.internal.getNumberOfPages();
				// console.log('totalPages: ',totalPages)
				hideLoader()
				var pdfBlob = pdf.output('blob');
				var pdfUrl = URL.createObjectURL(pdfBlob);
				window.open(pdfUrl, '_blank');
			});

// 	html2pdf().from(element).set(pdfOptions).toPdf().get('pdf').then((pdf) => {
// 	hideLoader()
//     var totalPages = pdf.internal.getNumberOfPages();

//     for (let i = 1; i <= totalPages; i++) {
//       // set footer to every page
//       pdf.setPage(i);
//       // set footer font
//       pdf.setFontSize(10);
//       pdf.setTextColor(150);
//       // this example gets internal pageSize just as an example to locate your text near the borders in case you want to do something like "Page 3 out of 4"
//       pdf.text(pdf.internal.pageSize.getWidth() - 30,                
//         pdf.internal.pageSize.getHeight() - 10, 'YOUR TEXT GOES HERE!');

//        // you can add the line separator as an image, consult the docs below to properly set the place of the image
//       pdf.addImage(img, 'png', 0, 0, 52, 23)
//     }
   
//   }).save();
//   this.elementPDF.clear();

			
	}
</script>