Maison >interface Web >tutoriel HTML >Comment obtenir les données d'un formulaire HTML sous forme de texte et les envoyer à html2pdf ?

Comment obtenir les données d'un formulaire HTML sous forme de texte et les envoyer à html2pdf ?

WBOYavant: 2023-09-06 12:21:151457parcourir

Comment obtenir les données dun formulaire HTML sous forme de texte et les envoyer à html2pdf ?

html2pdf est un package JavaScript qui permet aux développeurs de convertir du HTML en canevas, pdf, images, etc. Il prend le HTML comme paramètre et l'ajoute au pdf ou au document souhaité. De plus, il permet aux utilisateurs de télécharger le document après avoir ajouté du contenu HTML.

Ici, nous allons accéder au formulaire et l'ajouter au pdf à l'aide du package html2pdf npm. Nous verrons différents exemples pour ajouter des données de formulaire au pdf.

Grammaire

Les utilisateurs peuvent suivre la syntaxe suivante pour envoyer les données du formulaire HTML sous forme de texte et les envoyer à html2pdf.

var element = document.getElementById('form');
html2pdf().from(element).save();

Dans la syntaxe ci-dessus, nous accédons au formulaire en utilisant l'identifiant et l'ajoutons au pdf en utilisant la méthode html2pdf().

Exemple 1 (ajouter l'intégralité du formulaire au pdf)

Dans l'exemple ci-dessous, nous créons le formulaire et spécifions "from" comme identifiant. De plus, nous avons ajouté quelques éléments de saisie au formulaire. En JavaScript, nous accédons au formulaire en utilisant son identifiant et le stockons dans la variable "element".

Après cela, nous utilisons la méthode html2pdf() pour ajouter un formulaire au pdf. Dans la sortie, l'utilisateur peut observer que lorsqu'il clique sur le bouton Soumettre, il télécharge le pdf avec les balises et les valeurs d'entrée du formulaire.

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"> </script>
</head>
<body>
   <h3> Using the <i> html2pdf </i> to create a pdf using the content of the form </h3>
   <!-- creating a sample form with 3 to 4 input fields with labels -->
   <form id = "form">
      <label for = "name"> Name: </label>
      <input type = "text" id = "name" name = "name"> <br> <br>
      <label for = "email"> Email: </label>
      <input type = "email" id = "email" name = "email"> <br> <br>
      <input type = "button" value = "Submit" onclick = "generatePDF()">
   </form>
   <script>
      // function to generate a pdf from the form using html2pdf
      function generatePDF() {
         // get the form element
         var element = document.getElementById('form');
         // create a new pdf using the form element
         html2pdf().from(element).save();
      }
   </script>
</body>
</html>

Exemple 2 (ajouter uniquement le contenu du formulaire au pdf)

Dans l'exemple ci-dessous, nous ajouterons le contenu du formulaire au PDF, plutôt que l'intégralité du formulaire. Nous avons créé le formulaire et ajouté quelques champs de saisie comme dans le premier exemple.

En JavaScript, nous utilisons l'identifiant de chaque entrée pour accéder à sa valeur. Après cela, nous avons créé un élément « div » à l'aide de JavaScript et ajouté le contenu du formulaire au HTML de l'élément div à l'aide de l'attribut « innerHTML ».

Ensuite, nous utilisons le contenu de l'élément div pour créer le pdf.

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"> </script>
</head>
<body>
   <h3> Using the <i> html2pdf </i> to create a pdf using the content of the form </h3>
   <!-- creating a sample form with 3 to 4 input fields with labels -->
   <form id = "form">
      <label for = "name"> Name: </label>
      <input type = "text" id = "name" name = "name"> <br> <br>
      <label for = "comment"> Comment: </label>
      <input type = "comment" id = "comment" name = "comment"> <br> <br>
      <input type = "button" value = "Submit" onclick = "getContentInPDF()">
   </form>
   <script>
      function getContentInPDF() {
         // access form elements one by one
         var name = document.getElementById('name').value;
         var comment = document.getElementById('comment').value;
         // create a single html element by adding form data
         var element = document.createElement('div');
         element.innerHTML = '<h1>Form Data</h1>' +
            '<p>Name: ' + name + '</p>' +
            '<p>Comment: ' + comment + '</p>';
         // create a new pdf using the form element
         html2pdf().from(element).save();
      }
   </script>
</body>
</html>

L'utilisateur a appris à utiliser html2pdf pour ajouter des données de formulaire au pdf. Il suffit d’appeler la méthode html2pdf() et elle s’occupera de tout. Dans le premier exemple, nous avons ajouté le formulaire entier avec les valeurs d'entrée dans le pdf, dans le deuxième exemple, nous avons extrait les données du formulaire et les avons ajoutées au pdf.

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!

JavaScript html npm 并发 innerHTML canvas

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment utiliser le type de saisie de recherche en HTML ?Article suivant：Comment utiliser le type de saisie de recherche en HTML ?

Articles Liés

Voir plus