Comment créer un bouton qui soumet un formulaire et télécharge un pdf en même temps ?-js tutoriel-php.cn

Comment créer un bouton qui soumet un formulaire et télécharge un pdf en même temps ?

王林

Libérer： 2023-09-03 11:05:09

avant

1074 Les gens l'ont consulté

如何创建一个同时提交表单和下载 pdf 的按钮？

En utilisant HTML, JavaScript et jsPDF, nous pouvons créer un bouton permettant de soumettre un formulaire et de télécharger un pdf en même temps. Nous utiliserons HTML pour créer le formulaire, JavaScript pour gérer le processus de soumission et jsPDF pour générer le document PDF. Le fait de soumettre un formulaire et d’obtenir un PDF est l’un des cas d’utilisation les plus courants. Le PDF est un format de document courant sur Internet. Ils peuvent être utilisés pour suivre les contrats, les factures et d’autres données critiques. Dans de nombreux cas, un formulaire doit être soumis avant de recevoir le PDF. Discutons du processus complet en détail.

Développer des formulaires

Les formulaires sont un élément nécessaire de toute candidature en ligne. Ils nous permettent de collecter les données des utilisateurs et de les transmettre à notre serveur. Nous utiliserons HTML pour créer le formulaire. Voici un exemple de formulaire simple avec cinq champs de saisie -

<form>
   <h2>Tutorials point Contact Form</h2>
   <label for="name">Enter your Name:</label>
   <input type="text" id="name" name="name"><br><br>
   <label for="email">Enter your Email:</label>
   <input type="email" id="email" name="email"><br><br>
   <label for="phone">Enter your Ph.no.:</label>
   <input type="tel" id="phone" name="phone"><br><br>
   <label for="city">Enter your City:</label>
   <input type="text" id="city" name="city"><br><br>
   <label for="state">Enter your current State:</label>
   <input type="text" id="state" name="state"><br><br>
   <button onclick="downloadPDF()">Submit & Download PDF</button>
</form>

Copier après la connexion

Nous utiliserons une fonction appelée downloadPDF() pour télécharger et soumettre le formulaire en même temps.

function downloadPDF() { .....CODE HERE …… }
<button onclick="downloadPDF()">Submit & Download PDF/button>

Copier après la connexion

Générer un PDF

Nous utiliserons le package jsPDF pour créer un PDF. La bibliothèque client JavaScript permettant de créer des PDF s'appelle jsPDF. Il nous permet de générer des PDF instantanément sans aucun traitement côté serveur. La méthode JavaScript contenue dans ce code crée et télécharge un fichier PDF sur l'appareil de l'utilisateur. La fonctionnalité est activée lorsqu'un utilisateur clique sur un bouton du site Web. Voici les instructions sur la façon de créer un PDF à l'aide de jsPDF -

function downloadPDF() { .....CODE HERE …… }
function downloadPDF() {
   var name = document.getElementById("name").value;
   var email = document.getElementById("email").value;
   var phone = document.getElementById("phone").value;
   var city = document.getElementById("city").value;
   var state = document.getElementById("state").value;
   var doc = new jsPDF();
   doc.text(20, 20, "Name: " + name);
   doc.text(20, 30, "Email: " + email);
   doc.text(20, 40, "Phone: " + phone);
   doc.text(20, 50, "City: " + city);
   doc.text(20, 60, "State: " + state);
   doc.save("form.pdf");
}

Copier après la connexion

Formulaire intégré et génération PDF

Nous pouvons désormais combiner les deux puisque nous disposons d'un formulaire et d'une méthode pour créer des PDF. Nous allons concevoir un bouton qui soumet simultanément le formulaire et télécharge le PDF. Voici un exemple de bouton JavaScript qui soumet simultanément le formulaire et télécharge le PDF -

<html>
<head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
   <style>
      form {
         margin: 20px auto;
         padding: 20px;
         border: 1px solid gray;
         border-radius: 5px;
         width: 500px;
         text-align: center;
      }
      label {
         display: inline-block;
         width: 120px;
         text-align: left;
         margin-right: 10px;
      }
      input[type="text"], 
      input[type="email"],
      input[type="tel"] {
         padding: 10px;
         font-size: 18px;
         border-radius: 5px;
         border: 1px solid gray;
         width: 250px;
         margin-bottom: 20px;
      }
      button {
         margin-top: 20px;
         padding: 10px 20px;
         border-radius: 5px;
         background-color: green;
         color: white;
         font-size: 18px;
         cursor: pointer;
      }
   </style>
   <script>
      function downloadPDF() {
         var name = document.getElementById("name").value;
         var email = document.getElementById("email").value;
         var phone = document.getElementById("phone").value;
         var city = document.getElementById("city").value;
         var state = document.getElementById("state").value;
         var doc = new jsPDF();
         doc.text(20, 20, "Name: " + name);
         doc.text(20, 30, "Email: " + email);
         doc.text(20, 40, "Phone: " + phone);
         doc.text(20, 50, "City: " + city);
         doc.text(20, 60, "State: " + state);
         doc.save("form.pdf");
      }
   </script>
</head>
<body>
   <form>
      <h2>Tutorials point Contact Form</h2>
      <label for="name">Enter your Name:</label>
      <input type="text" id="name" name="name"><br><br>
      <label for="email">Enter your Email:</label>
      <input type="email" id="email" name="email"><br><br>
      <label for="phone">Enter your Ph.no.:</label>
      <input type="tel" id="phone" name="phone"><br><br>
      <label for="city">Enter your City:</label> 
      <input type="text" id="city" name="city"><br><br>
      <label for="state">Enter your current State:</label>
      <input type="text" id="state" name="state"><br><br>
      <button onclick="downloadPDF()">Submit & Download PDF</button>
   </form>
</body>
</html>

Copier après la connexion

Dans cet article, nous explorons le monde passionnant du développement Web et apprenons à créer un bouton qui non seulement soumet un formulaire, mais télécharge également un PDF en une seule fois à l'aide de JavaScript. Nous avons parcouru les étapes de création d'un formulaire en HTML, de gestion du processus de soumission à l'aide de JavaScript et de génération d'un document PDF à l'aide de jsPDF. En combinant ces technologies puissantes, nous avons réussi à créer un bouton qui remplit les deux fonctions en un seul clic. J'espère que cet article a été informatif et vous a donné une idée plus claire de la façon de créer un bouton qui soumet simultanément un formulaire et télécharge un PDF à l'aide de JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!