Heim > Artikel > Web-Frontend > Wie erstelle ich eine Schaltfläche, die gleichzeitig ein Formular sendet und ein PDF herunterlädt?

Wie erstelle ich eine Schaltfläche, die gleichzeitig ein Formular sendet und ein PDF herunterlädt?

王林nach vorne: 2023-09-03 11:05:09995Durchsuche

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

Durch die Verwendung von HTML, JavaScript und jsPDF können wir eine Schaltfläche erstellen, mit der wir gleichzeitig ein Formular senden und ein PDF herunterladen können. Wir werden HTML verwenden, um das Formular zu erstellen, JavaScript, um den Übermittlungsprozess abzuwickeln, und jsPDF, um das PDF-Dokument zu generieren. Das Absenden eines Formulars und das Erhalten einer PDF-Datei ist einer der häufigsten Anwendungsfälle. PDF ist ein gängiges Dokumentformat im Internet. Sie können zur Nachverfolgung von Verträgen, Rechnungen und anderen kritischen Daten verwendet werden. In vielen Fällen muss ein Formular eingereicht werden, bevor das PDF empfangen wird. Lassen Sie uns den gesamten Prozess im Detail besprechen.

Formulare entwickeln

Formulare sind ein notwendiger Bestandteil jeder Online-Bewerbung. Sie ermöglichen es uns, Benutzerdaten zu sammeln und an unseren Server zu übermitteln. Wir werden HTML verwenden, um das Formular zu erstellen. Hier ist ein Beispiel für ein einfaches Formular mit fünf Eingabefeldern -

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

Wir werden eine Funktion namens downloadPDF() verwenden, um das Formular gleichzeitig herunterzuladen und abzusenden.

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

PDF generieren

Wir werden das jsPDF-Paket verwenden, um PDF zu erstellen. Die JavaScript-Clientbibliothek zum Erstellen von PDFs heißt jsPDF. Es ermöglicht uns die sofortige Generierung von PDF-Dateien ohne serverseitige Verarbeitung. Die in diesem Code enthaltene JavaScript-Methode erstellt eine PDF-Datei und lädt sie auf das Gerät des Benutzers herunter. Die Funktion wird aktiviert, wenn ein Benutzer auf eine Schaltfläche auf der Website klickt. Hier finden Sie Anweisungen zum Erstellen von PDFs mit 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");
}

Integrierte Formular- und PDF-Generierung

Wir können jetzt beides kombinieren, da wir eine Form und Methode zum Erstellen von PDFs haben. Wir entwerfen eine Schaltfläche, die gleichzeitig das Absenden des Formulars und das Herunterladen der PDF-Datei ermöglicht. Hier ist ein Beispiel für eine JavaScript-Schaltfläche, die gleichzeitig das Formular sendet und das PDF herunterlädt -

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

In diesem Artikel erkunden wir die spannende Welt der Webentwicklung und erfahren, wie Sie mithilfe von JavaScript eine Schaltfläche erstellen, die nicht nur ein Formular absendet, sondern auch eine PDF-Datei auf einmal herunterlädt. Wir haben die Schritte der Erstellung eines Formulars mit HTML, der Abwicklung des Übermittlungsprozesses mit JavaScript und der Generierung eines PDF-Dokuments mit jsPDF durchlaufen. Durch die Kombination dieser leistungsstarken Technologien ist es uns gelungen, eine Schaltfläche zu entwickeln, die beide Funktionen mit einem einzigen Klick ausführt. Ich hoffe, dieser Artikel war informativ und hat Ihnen eine klarere Vorstellung davon gegeben, wie Sie mithilfe von JavaScript eine Schaltfläche erstellen, die gleichzeitig ein Formular sendet und eine PDF-Datei herunterlädt.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine Schaltfläche, die gleichzeitig ein Formular sendet und ein PDF herunterlädt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：Entwerfen einer RESTful-API mit NodeJS und RestifyNächster Artikel：Entwerfen einer RESTful-API mit NodeJS und Restify

In Verbindung stehende Artikel

Mehr sehen