Télécharger un formulaire html en PDF

Fermé
Anonyme3435 Messages postés 1 Date d'inscription jeudi 9 février 2023 Statut Membre Dernière intervention 9 février 2023 - 9 févr. 2023 à 10:23
jordane45 Messages postés 38446 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 février 2025 - 9 févr. 2023 à 17:13

Bonjour à tous,

J'ai un énorme soucis, cela fait maintenant 1 semaine que je travaille sur un projet très important, j'ai créer un fichier qui permet de créer des contrats liens internet, dans ce fichier se trouve un formulaire en HTML et Javascript.

Je vais vous fournir le code juste après pour que vous puissiez comprendre :).

Je souhaiterais que lorsque je clique sur "Télécharger en PDF", rien ne se passe...

Pour mieux comprendre ma demande : je souhaiterais s'il vous plaît de bien pouvoir m'aider à ce que mon programme me permet de télécharger entièrement la page html avec les informations qu'on fournira dans le formulaire !

vous verrez que la page web/le formulaire contiendra des images des input des button ect... et je souhaiterais que TOUT soit télécharger lorsque l'on cliquera sur "Télécharger en PDF".

Voici le code en question :

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<link rel="icon" href="Image_AMR_Info/logo_amr_informatique.ico" type="image/png/icon"/>
<link rel="stylesheet" href="contrat_mobile.css" />
<title>Contrat Mobile</title>
</head>

<body>
<ul>
<li><a href="contrat_liens_internet.html" >Contrat Liens Internet</a></li><!--
--><li><a href="contrat_voip.html" >Contrat VOIP</a></li>
</ul>
<img src="Image_AMR_Info/logo_amr_informatique.png" alt="logo AMR Informatique" /><!--class="logo"-->
<h1>CONTRAT MOBILE</h1>
<input type="checkbox" id="nouveau_contrat" /><label for="nouveau_contrat"><strong> Nouveau Contrat</strong></label><br>
<input type="checkbox" id="ajout_modification" /><label for="ajout_modification"> Ajout/Modification</label>

<!--adresse de l'entreprise-->
<p><strong>AMR INFORMATIQUE</strong></p>
<p>38, rue Général Leclerc<br>395076359<br>FR57395076359<br>SARL SCOP au capital de 7 622.45 €</p>

<h2><label for="numero_contrat">CONTRAT N°: </label><input type="text" id="numero_contrat" class="contrat" /></h2>
<form class="form-control">
<fieldset>
<legend><strong> TITULAIRE DU CONTRAT </strong></legend><br>
<fieldset>
<label for="raison_sociale"> Raison sociale : </label><input type="text" id="raison_sociale" name="raison_sociale" /> <label for="siret"> SIRET : </label><input type="integer" id="siret" name="siret" /><br><br>
<label for="adresse"> Adresse : </label><input type="text" id="adresse" name="adresse" /> <label for="code_APE"> Code APE : </label><input type="text" id="code_APE" name="code_APE" /><br><br>
<input type="checkbox" id="sa" /><label for="sa">SA</label> <input type="checkbox" id="sarl" /><label for="sarl"> SARL</label> <input type="checkbox" id="autres" /><label for="autres">Autres : </label><input type="text" id="autres" /> <label for="tel"> Tel. : </label><input type="integer" id="tel" name="tel" /> <br><br>
<label for="code_postal"> Code Postal : </label><input type="text" id="code_postal" name="code_postal" /> <label for="ville"> Ville : </label><input type="text" id="ville" name="ville" /><br><br>

<label for="nom"> Nom signataire : </label><input type="text" id="nom" name="nom" /> <label for="tel"> Ligne Directe : </label><input type="integer" id="tel" name="tel" /><br><br>
<label for="prenom"> Prénom : </label><input type="text" id="prenom" name="prenom" /> <label for="tel_mobile"> Mobile : </label><input type="integer" id="tel_mobile" name="tel_mobile" /><br><br>
<label for="fonction"> Fonction : </label><input type="text" id="fonction" name="fonction" /> <label for="courriel"> Email : </label><input type="email" id="courriel" name="courriel" /><br><br>
</fieldset><br>
</fieldset><br>

<fieldset>
<legend><strong> ADRESSE DE FACTURATION </strong></legend>
<fieldset>
<label for="adresse"> Adresse : </label><input type="text" id="adresse" name="adresse" /><br><br>
<label for="code_postal"> Code Postal : </label><input type="text" id="code_postal" name="code_postal" /> <label for="ville"> Ville : </label><input type="text" id="ville" name="ville" /><br><br>
<label for="nom"> Nom contact facturation : </label><input type="text" id="nom" name="nom" /> <label for="tel_mobile"> L.Dir./Mobile : </label><input type="integer" id="tel_mobile" name="tel_mobile" /><br><br>
<label for="prenom"> Prénom : </label><input type="text" id="prenom" name="prenom" /> <label for="courriel"> Email : </label><input type="email" id="courriel" name="courriel" /><br><br>
<input type="checkbox" id="facture_electronique" name="facture_electronique" /><label>Je ne souhaite pas bénéficier de la facture électronique</label>
</fieldset>
</fieldset>

<h3><strong>SERVICES COMMANDÉS</strong></h3>
<p>MANDAT DE PORTABILITÉ<br>
*En cochant la case ci-dessus, et / ou dans l'annexe ci-jointe, je soussigné(e), titulaire du / (des) contrat(s) référence(s) ci-dessous, déclare de bonne foi :<br>
1.  Demander la résiliation du /(des) contrat(s) ci-dessous et la mise en oeuvre de la portabilité du ou des numéros utilisés au titre du présent contrat. J'ai
bien noté que je fais mon affaire des conditions contractuelles me liant à mon fournisseur actuel de service de téléphonie et notamment celles relatives à la
durée minimum d'engagement et aux et aux conditions de résilation;<br>
2.  Choisir AMR INFORMATIQUE, aux lieu et place de mon ancien opérateur et, à ce titre, avoir pleinement connaissance des conséquences de la résiliation de mon
précédent contrat avec mon ancien opérateur, à savoir la rupture du lien contractuel avec ce dernier et le fait que la fourniture de l'accès téléphonique reste à
la charge exclusive de AMR INFORMATIQUE;<br>
3.  Avoir donné mandat à la société AMR INFORMATIQUE (SIREN : 395076359), pour effectuer en mon nom et pour mon compte, toutes les démarches nécessaired auprès de
mon ancien opérateur de boucle locale, afin de procéder à la résiliationde mon accès téléphonique auprès de mon ancien opérateur et de mettre en oeuvre la probabilité
des numéros susvisés;<br>
4.  Être informé(e) que dans l'hypothèse où la probabilité n'est pas mise en oeuvre, je demeure clietn de mon ancien apérateur et demeure donc redevable de l'ensemble
de mes obligations envers mon ancien opérateur au titre des liens contractuels avec celui-ci;<br>
5.  M'engager à adresser à AMR INFORMATIQUE toute demande ou réclamation concernant l'exécution du présent mandat. Le présent mandat est valable pour une durée de trois (3)
mois à compter de la date de signature des présentes</p><br>

<div class="line"></div>

<table>
<tr>
<th>N° DE LIGNE</th>
<th>Nom de l'util.</th>
<th>Forfait</th>
<th>Option(s)</th>
<th>RIO</th>
<th>Date de porta</th>
<th>Tarif mensuel (en € HT)</th>
</tr>

<tr><!-- Première ligne-->
<td><input type="integer" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
</tr>

<tr><!-- deuxième ligne-->
<td><input type="integer" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
</tr>

<tr><!-- troisième  ligne-->
<td><input type="integer" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
</tr>

<tr><!-- quatrième ligne-->
<td><input type="integer" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
</tr>

<tr><!-- cinquième ligne-->
<td><input type="integer" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
</tr>

<tr><!-- sixième ligne-->
<td><input type="integer" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
</tr>

<tr><!-- septième ligne-->
<<td><input type="integer" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
</tr>

<tr><!-- huitième ligne-->
<td><input type="integer" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
</tr>

<tr><!-- neuvième ligne-->
<td><input type="integer" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
</tr>

<tr><!-- dixième ligne-->
<td><input type="integer" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
<td><input type="text" id="ligne" name="ligne" /></td>
</tr>

</table>

<div class="line"></div>
<h4> MODE DE PAIEMENT </h4>
<input type="checkbox" id="prelevement" name="prelevement"/><label for="prelevement"> Prélèvement automatique : </label> <input type="checkbox" id="cheque" name="cheque"/><label for="autre"> Autre : </label><input type="text" id="autre" name="autre" /><br><br>
<div class="line"></div>
<p>Le présent contrat de service Liens Internet (nommé ci-après contrat) est constitué par ordre de priorité  décroissante : Annexe 1 - Condition Générales de Service, de la Description des Services,
Annexe IV - Conditions Particulières Du Service Internet, du présent Bon de commande, de la fiche tarifaire concernant le service souscrit par le Client et le cas échéant du Mandat de prélèvement SEPA.
Le contrat constitue l'accord unique des parties et prévaut sur tout autre document. Le Client certifie l'exactitude des informations définies au Contrat, reconnaît avoir pris connaissance et accepte
l'intégralité des dispositions du contrat, intégrant les obligations du Client envers Orange et/ou tout autre Opérateur.</p>
<fieldset class="signature">
<div class="date2"><label for="date">Date : </label><input type="text" id="date" class="date"/></div><br><br>
<script>
 document.getElementById("date").value = new Date().toLocaleDateString();
</script>
<label for="nom">Nom : </label><input type="text" id="nom" class="date"/><br><br>
<label for="fonction">Fonction : </label><input type="text" id="fonction" class="date"/><br><br>
<label for="cachet">(Cachet et signature) </label><br><br><br><br><br><br><br>
</fieldset>

<fieldset class="signature2">
<label><strong>AMR INFORMATIQUE</strong></label>
<div class="date2"><label for="date2" >Date : </label><input type="text" id="date2" class="date"/></div><br><br>
<script>
 document.getElementById("date2").value = new Date().toLocaleDateString();
</script>

<label for="nom_turan">Nom : </label><input type="text" id="nom_turan" value="TURAN Tolgahan" class="date"/><br><br>
<label for="fonction_turan">Fonction : </label><input type="text" id="fonction_turan" value="Gérant" class="date"/><br><br>
<label for="cachet_amr">(Cachet et signature) </label>
<img src="Image_AMR_Info/cachet_amr_info.png" style="width:35%" alt="Cachet AMR Informatique" id="cachet_signature_amr"/><br><br><br><br><br>
<div class="line"></div><br>
<label>COMMERCIAL : TURAN TOLGAHAN</label>
</fieldset><br><br>

<script>
document.querySelector('#adresse').addEventListener('input', function(event){
document.querySelectorAll('[id=adresse]').forEach(function(el){
el.value=event.target.value;
})
})

document.querySelector('#code_postal').addEventListener('input', function(event){
document.querySelectorAll('[id=code_postal]').forEach(function(el){
el.value=event.target.value;
})
})

document.querySelector('#nom').addEventListener('input', function(event){
document.querySelectorAll('[id=nom]').forEach(function(el){
el.value=event.target.value;
})
})

document.querySelector('#courriel').addEventListener('input', function(event){
document.querySelectorAll('[id=courriel]').forEach(function(el){
el.value=event.target.value;
})
})

document.querySelector('#tel_mobile').addEventListener('input', function(event){
document.querySelectorAll('[id=tel_mobile]').forEach(function(el){
el.value=event.target.value;
})
})

document.querySelector('#ville').addEventListener('input', function(event){
document.querySelectorAll('[id=ville]').forEach(function(el){
el.value=event.target.value;
})
})

document.querySelector('#fonction').addEventListener('input', function(event){
document.querySelectorAll('[id=fonction]').forEach(function(el){
el.value=event.target.value;
})
})

document.querySelector('#prenom').addEventListener('input', function(event){
document.querySelectorAll('[id=prenom]').forEach(function(el){
el.value=event.target.value;
})
})

document.querySelector('#tel').addEventListener('input', function(event){
document.querySelectorAll('[id=tel]').forEach(function(el){
el.value=event.target.value;
})
})


</script>
<button onclick="downloadPDF()">Télécharger en PDF</button>
</form><br><br>
<script>
function downloadPDF(){
 var nom= document.getElementById("nom").value;
 
 var doc = new jsPDF();
 
 <!-- permet d'ajouter les données fournis dans le formulaire vers le PDF afin de le télécharger -->
 doc.text("Contrat liens internet", 10, 10);
 doc.text(nom, 10, 20);
 
 <!-- téléchargement du PDF -->
 var fileName + "contrat liens internet de" + nom +".pdf";
 doc.save(fileName);
 }
 
</script>
</body>
</html>

Je vous remercie infiniment par avance pour votre aide c'est un projet très important s'il vous plaît !

Bien cordialement.


Windows / Firefox 109.0

A voir également:

1 réponse

jordane45 Messages postés 38446 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 février 2025 4 737
9 févr. 2023 à 17:13

Bonjour,

A l'avenir, merci d'utiliser l'icone prévue pour poster du code sur le forum... ça rendra ta question plus lisible.

Ensuite,  Tu dis que tu veux que rien ne se passe .. puis après.. que ça créé un pdf..  faudrait savoir :-)

Et enfin.. tu sembles vouloir utiliser la librairie jsPdf.

Je ne vois pas dans ton code la ligne qui permet de charger la librairie dans ta page...

un truc du genre :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

As tu appliqué la documentation ? https://github.com/parallax/jsPDF

As tu regardé dans la console de ton navigateur si tu as des erreurs ?

.


0