Bonjour,
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
Afficher la suite
