Heim > Artikel > Web-Frontend > Wie erhalte ich HTML-Formulardaten als Text und sende sie an html2pdf?

Wie erhalte ich HTML-Formulardaten als Text und sende sie an html2pdf?

WBOYnach vorne: 2023-09-06 12:21:151411Durchsuche

html2pdf ist ein JavaScript-Paket, mit dem Entwickler HTML in Canvas, PDF, Bilder und mehr konvertieren können. Es nimmt HTML als Parameter und fügt es dem PDF oder dem gewünschten Dokument hinzu. Darüber hinaus können Benutzer das Dokument herunterladen, nachdem sie HTML-Inhalte hinzugefügt haben.

Hier greifen wir auf das Formular zu und fügen es mithilfe des html2pdf npm-Pakets zum PDF hinzu. Wir werden verschiedene Beispiele zum Hinzufügen von Formulardaten zu PDF sehen.

Grammatik

Benutzer können der folgenden Syntax folgen, um HTML-Formulardaten als Text zu senden und an html2pdf zu senden.

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

In der obigen Syntax greifen wir über die ID auf das Formular zu und fügen es mit der Methode html2pdf() zum PDF hinzu.

Beispiel 1 (gesamtes Formular zum PDF hinzufügen)

Im folgenden Beispiel erstellen wir das Formular und geben „von“ als ID an. Darüber hinaus haben wir dem Formular einige Eingabeelemente hinzugefügt. In JavaScript greifen wir über seine ID auf das Formular zu und speichern es in der Variablen „element“.

Danach verwenden wir die Methode html2pdf(), um dem PDF ein Formular hinzuzufügen. In der Ausgabe kann der Benutzer beobachten, dass beim Klicken auf die Schaltfläche „Senden“ das PDF mit den Formulareingabe-Tags und -Werten heruntergeladen wird.

<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>

Beispiel 2 (Formularinhalt nur zum PDF hinzufügen)

Im folgenden Beispiel fügen wir den Inhalt des Formulars zum PDF hinzu und nicht das gesamte Formular. Wir haben das Formular erstellt und einige Eingabefelder wie im ersten Beispiel hinzugefügt.

In JavaScript verwenden wir die ID jeder Eingabe, um auf ihren Wert zuzugreifen. Danach haben wir mit JavaScript ein „div“-Element erstellt und den Formularinhalt mithilfe des „innerHTML“-Attributs zum HTML des div-Elements hinzugefügt.

Als nächstes verwenden wir den Inhalt des div-Elements, um das PDF zu erstellen.

<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>

Der Benutzer hat gelernt, mit html2pdf Formulardaten zu PDF hinzuzufügen. Wir müssen nur die Methode html2pdf() aufrufen und sie erledigt alles. Im ersten Beispiel haben wir das gesamte Formular mit den Eingabewerten in das PDF eingefügt, im zweiten Beispiel haben wir die Formulardaten extrahiert und in das PDF eingefügt.

Das obige ist der detaillierte Inhalt vonWie erhalte ich HTML-Formulardaten als Text und sende sie an html2pdf?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html npm 并发 innerHTML canvas

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie verwende ich den Sucheingabetyp in HTML?Nächster Artikel：Wie verwende ich den Sucheingabetyp in HTML?

In Verbindung stehende Artikel

Mehr sehen