Enregister un fichier PDF dès qu'on clique sur le bouton

BadameTv Messages postés 1 Date d'inscription mardi 28 mai 2024 Statut Membre Dernière intervention 28 mai 2024 - Modifié le 28 mai 2024 à 10:03
jordane45 Messages postés 38219 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 8 juillet 2024 - 28 mai 2024 à 10:04

Bonjour,
je suis en stage et c'est la première fois que je fais du java et que j'utilise le jsPDF je ne sais pas comment cela fonctionne et comment me documenter dessus je vous met le code en dessous en copier coller et le rendu que sa doit être en PDF

code :  

<!doctype html>
  <html lang="fr">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Fiche d'Intégration</title>
      <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
      <style>
        body {
          background-color: #f8f9fa;
        }
        .form-section {
          margin-bottom: 2rem;
        }
        .section-divider {
          border-top: 2px solid black;
          margin: 2rem 0;
        }
        .form-header {
          background-color: #343a40;
          color: white;
          padding: 0.5rem;
          border-radius: 0.25rem;
        }
      </style>
    </head>
    <body>
      <div class="container mt-4">
        <h1 class="text-center mb-4">FICHE D'INTEGRATION</h1>
        <form id="integrationForm">
          <!-- Employeur -->
          <div class="form-section">
            <div class="form-header">
              <h2>EMPLOYEUR :</h2>
            </div>
            <div class="mb-3">
              <label for="departement" class="form-label">Département :</label>
              <input type="text" class="form-control" id="departement" name="departement">
            </div>
            <div class="mb-3">
              <label for="service" class="form-label">Service :</label>
              <input type="text" class="form-control" id="service" name="service">
            </div>
            <div class="mb-3">
              <label for="respHierarchique" class="form-label">Responsable hiérarchique :</label>
              <input type="text" class="form-control" id="respHierarchique" name="respHierarchique">
            </div>
          </div>

          <div class="section-divider"></div>

          <!-- Collaborateur -->
          <div class="form-section">
            <div class="form-header">
              <h2>COLLABORATEUR :</h2>
            </div>
            <div class="mb-3">
              <label for="nom" class="form-label">Nom :</label>
              <input type="text" class="form-control" id="nom" name="nom">
            </div>
            <div class="mb-3">
              <label for="prenom" class="form-label">Prénom :</label>
              <input type="text" class="form-control" id="prenom" name="prenom">
            </div>
            <div class="mb-3">
              <label for="fonction" class="form-label">Fonction :</label>
              <input type="text" class="form-control" id="fonction" name="fonction">
            </div>
            <div class="mb-3">
              <label for="natContrat" class="form-label">Nature du contrat :</label>
              <input type="text" class="form-control" id="natContrat" name="natContrat">
            </div>
            <div class="mb-3">
              <label for="dateEntrer" class="form-label">Date d'entrée :</label>
              <input type="date" class="form-control" id="dateEntrer" name="dateEntrer">
            </div>
            <div class="mb-3">
              <label for="dateNaiss" class="form-label">Date de naissance :</label>
              <input type="date" class="form-control" id="dateNaiss" name="dateNaiss">
            </div>
          </div>

          <div class="section-divider"></div>

          <!-- Matériel fourni -->
          <div class="form-section">
            <div class="form-header">
              <h2>MATERIEL FOURNI :</h2>
            </div>
            <div class="mb-3">
              <label for="emplaBureau" class="form-label">Emplacement bureau :</label>
              <input type="text" class="form-control" id="emplaBureau" name="emplaBureau">
            </div>
            
            <!-- Badge accès porte -->
            <h5>Badge accès porte :</h5>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="badge" id="badgeOui" value="oui">
              <label class="form-check-label" for="badgeOui">Oui</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="badge" id="badgeNon" value="non">
              <label class="form-check-label" for="badgeNon">Non</label>
            </div>
            <div class="mb-3">
              <label for="preBadge" class="form-label">Précision :</label>
              <input type="text" class="form-control" id="preBadge" name="preBadge">
            </div>

            <!-- Clé(s) -->
            <h5>Clé(s) :</h5>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="cle" id="cleOui" value="oui">
              <label class="form-check-label" for="cleOui">Oui</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="cle" id="cleNon" value="non">
              <label class="form-check-label" for="cleNon">Non</label>
            </div>
            <div class="mb-3">
              <label for="preCle" class="form-label">Précision :</label>
              <input type="text" class="form-control" id="preCle" name="preCle">
            </div>

            <!-- Accès parking -->
            <h5>Accès parking :</h5>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="park" id="parkOui" value="oui">
              <label class="form-check-label" for="parkOui">Oui</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="park" id="parkNon" value="non">
              <label class="form-check-label" for="parkNon">Non</label>
            </div>

            <!-- Ordinateur -->
            <h5>Ordinateur :</h5>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="ordi" id="ordiFixe" value="Fixe">
              <label class="form-check-label" for="ordiFixe">Fixe</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="ordi" id="ordiPortable" value="Portable">
              <label class="form-check-label" for="ordiPortable">Portable</label>
            </div>

            <!-- Accès à Distance -->
            <h5>Accès à Distance :</h5>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="distance" id="distanceOui" value="oui">
              <label class="form-check-label" for="distanceOui">Oui</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="distance" id="distanceNon" value="non">
              <label class="form-check-label" for="distanceNon">Non</label>
            </div>
            <div class="mb-3">
              <label for="preAcce" class="form-label">Précision :</label>
              <input type="text" class="form-control" id="preAcce" name="preAcce">
            </div>

            <!-- Logiciel(s) spécifique(s) -->
            <h5>Logiciel(s) spécifique(s) :</h5>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="logi" id="logiOui" value="oui">
              <label class="form-check-label" for="logiOui">Oui</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="logi" id="logiNon" value="non">
              <label class="form-check-label" for="logiNon">Non</label>
            </div>
            <div class="mb-3">
              <label for="preLogi" class="form-label">Précision :</label>
              <input type="text" class="form-control" id="preLogi" name="preLogi">
            </div>

            <!-- Smartphone -->
            <h5>Smartphone :</h5>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="smart" id="smartOui" value="oui">
              <label class="form-check-label" for="smartOui">Oui</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="smart" id="smartNon" value="non">
              <label class="form-check-label" for="smartNon">Non</label>
            </div>
            <div class="mb-3">
              <label for="preSmart" class="form-label">Précision :</label>
              <input type="text" class="form-control" id="preSmart" name="preSmart">
            </div>

            <!-- Ligne téléphonique fixe -->
            <h5>Ligne téléphonique fixe :</h5>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="tel" id="telOui" value="oui">
              <label class="form-check-label" for="telOui">Oui</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="tel" id="telNon" value="non">
              <label class="form-check-label" for="telNon">Non</label>
            </div>

            <!-- Adresse e-mail -->
            <h5>Adresse e-mail :</h5>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="email" id="emailOui" value="oui">
              <label class="form-check-label" for="emailOui">Oui</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="email" id="emailNon" value="non">
              <label class="form-check-label" for="emailNon">Non</label>
            </div>
            <div class="mb-3">
              <label for="emailEri" class="form-label">Intitulé : @par-eri.fr</label>
              <input type="text" class="form-control" id="emailEri" name="emailEri" pattern=".*@par-eri\.fr$" required>
              <div class="invalid-feedback">
                L'adresse e-mail doit se terminer ***@***
              </div>
            </div>

            <!-- Accès Serveur -->
            <h5>Accès Serveur :</h5>
            <div class="mb-3">
              <input type="text" class="form-control" id="acceserveur" name="acceserveur">
            </div>
          </div>

          <button type="submit" class="btn btn-primary">Envoyer</button>
        </form>
      </div>

      <script>
        
        document.getElementById('integrationForm').addEventListener('submit', function(event) {
          event.preventDefault(); // Empêcher la soumission par défaut du formulaire
          
          // Récupérer les données du formulaire
          var departement = document.getElementById('departement').value;
          var service = document.getElementById('service').value;
          var respHierarchique = document.getElementById('respHierarchique').value;
          var nom = document.getElementById('nom').value;
          var prenom = document.getElementById('prenom').value;
          var fonction = document.getElementById('fonction').value;
          var natContrat = document.getElementById('natContrat').value;
          var dateEntrer = document.getElementById('dateEntrer').value;
          var dateNaiss = document.getElementById('dateNaiss').value;
          var emplaBureau = document.getElementById('emplaBureau').value;
          var badge = document.querySelector('input[name="badge"]:checked').value;
          var preBadge = document.getElementById('preBadge').value;
          var cle = document.querySelector('input[name="cle"]:checked').value;
          var preCle = document.getElementById('preCle').value;
          var park = document.querySelector('input[name="park"]:checked').value;
          var ordi = document.querySelector('input[name="ordi"]:checked').value;
          var distance = document.querySelector('input[name="distance"]:checked').value;
          var preAcce = document.getElementById('preAcce').value;
          var logi = document.querySelector('input[name="logi"]:checked').value;
          var preLogi = document.getElementById('preLogi').value;
          var smart = document.querySelector('input[name="smart"]:checked').value;
          var preSmart = document.getElementById('preSmart').value;
          var tel = document.querySelector('input[name="tel"]:checked').value;
          var email = document.querySelector('input[name="email"]:checked').value;
          var emailEri = document.getElementById('emailEri').value;
          var acceserveur = document.getElementById('acceserveur').value;
    
          // Créer un nouveau document PDF
          var doc = new jsPDF();
    
          // Ajouter le contenu au PDF
          doc.text(20, 20, 'FICHE D\'INTEGRATION');
          doc.text(20, 30, '________________________________________');
          doc.text(20, 40, 'Afin d accueillir au mieux le nouveau collaborateur, merci de compléter la présente fiche 15 jours minimum avant son arrivée. Cette fiche sera conservée dans le dossier et sera reprise le jour de sa sortie, le cas échéant.');
          doc.text(20, 50, '________________________________________');
          doc.text(20, 60, 'EMPLOYEUR');
          doc.text(20, 70, 'Département : ' + departement + '\t\tService : ' + service);
          doc.text(20, 80, 'Responsable hiérarchique : ' + respHierarchique);
          doc.text(20, 90, '________________________________________');
          doc.text(20, 100, 'COLLABORATEUR');
          doc.text(20, 110, 'NOM : ' + nom + '\tPrénom : ' + prenom);
          doc.text(20, 120, 'Fonction : ' + fonction + '\t\tNature du contrat : ' + natContrat);
          doc.text(20, 130, 'Date d\'entrée : ' + dateEntrer + '\t\tDate de naissance : ' + dateNaiss);
          doc.text(20, 140, '________________________________________');
          doc.text(20, 150, 'MATERIEL FOURNI');
          doc.text(20, 160, 'ENTREE');
          doc.text(30, 170, 'Emplacement bureau : ' + emplaBureau);
          doc.text(30, 180, 'Badge accès porte : ' + badge + '\t\tPrécision : ' + preBadge);
          doc.text(30, 190, 'Clé(s) : ' + cle + '\t\tPrécision : ' + preCle);
          doc.text(30, 200, 'Accès parking : ' + park);
          doc.text(30, 210, 'Ordinateur : ' + ordi);
          doc.text(30, 220, 'Accès à Distance : ' + distance + '\t\tPrécision : ' + preAcce);
          doc.text(30, 230, 'Logiciel(s) spécifique(s) : ' + logi + '\t\tPrécision : ' + preLogi);
          doc.text(30, 240, 'Smartphone : ' + smart + '\t\tPrécision : ' + preSmart);
          doc.text(30, 250, 'Ligne téléphonique fixe : ' + tel);
          doc.text(30, 260, 'Adresse e-mail : ' + email + '\t\tIntitulé : ' + emailEri);
          doc.text(30, 270, 'Accès Serveur : ' + acceserveur);
    
          // Télécharger le PDF
          doc.save('fiche_integration.pdf');
        });
      </script>
    </body>
    </html>
voici un attendu de ce que doit etre representer lorsque le pdf est ouvert
A voir également:

1 réponse

jordane45 Messages postés 38219 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 8 juillet 2024 4 681
28 mai 2024 à 10:04

Bonjour,

 je ne sais pas comment cela fonctionne et comment me documenter dessus

Comme ça : 

https://www.google.com/search?q=jspdf+documentation