Rumah > Artikel > hujung hadapan web > Bagaimana untuk mencipta butang yang menghantar borang dan memuat turun pdf pada masa yang sama?

Bagaimana untuk mencipta butang yang menghantar borang dan memuat turun pdf pada masa yang sama?

王林ke hadapan: 2023-09-03 11:05:091055semak imbas

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

Dengan menggunakan HTML, JavaScript dan jsPDF, kita boleh mencipta butang yang boleh menghantar borang dan memuat turun pdf pada masa yang sama. Kami akan menggunakan HTML untuk membuat borang, JavaScript untuk mengendalikan proses penyerahan, dan jsPDF untuk menjana dokumen PDF. Tindakan menyerahkan borang dan mendapatkan PDF adalah salah satu kes penggunaan yang paling biasa. PDF ialah format dokumen biasa di Internet. Ia boleh digunakan untuk menjejak kontrak, invois dan data kritikal lain. Dalam banyak kes, borang perlu diserahkan sebelum PDF diterima. Mari kita bincangkan proses lengkap secara terperinci.

Borang pembangunan

Borang adalah komponen yang diperlukan dalam mana-mana permohonan dalam talian. Ia membolehkan kami mengumpul data pengguna dan menghantarnya ke pelayan kami. Kami akan menggunakan HTML untuk membina borang. Berikut ialah contoh borang ringkas dengan lima medan input -

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

Kami akan menggunakan fungsi yang dipanggil downloadPDF() untuk memuat turun dan menyerahkan borang pada masa yang sama.

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

Jana PDF

Kami akan menggunakan pakej jsPDF untuk membuat PDF. Pustaka klien JavaScript untuk mencipta PDF dipanggil jsPDF. Ia membolehkan kami menjana PDF serta-merta tanpa sebarang pemprosesan sebelah pelayan. Kaedah JavaScript yang terkandung dalam kod ini mencipta dan memuat turun fail PDF ke peranti pengguna. Ciri ini diaktifkan apabila pengguna mengklik butang di laman web. Berikut ialah arahan tentang cara membuat PDF menggunakan 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");
}

Borang bersepadu dan penjanaan PDF

Kami kini boleh menggabungkan kedua-duanya kerana kami mempunyai bentuk dan kaedah untuk mencipta PDF. Kami akan mereka bentuk butang yang menyerahkan borang dan memuat turun PDF secara serentak. Di bawah ialah contoh butang JavaScript yang menyerahkan borang secara serentak dan memuat turun 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>

Dalam artikel ini, kami meneroka dunia pembangunan web yang menarik dan mempelajari cara membuat butang yang bukan sahaja menyerahkan borang, tetapi juga memuat turun PDF sekali gus menggunakan JavaScript. Kami melalui langkah-langkah mencipta borang menggunakan HTML, mengendalikan proses penyerahan menggunakan JavaScript dan menjana dokumen PDF menggunakan jsPDF. Dengan menggabungkan teknologi berkuasa ini, kami berjaya membuat butang yang melaksanakan kedua-dua fungsi dengan satu klik. Saya harap artikel ini bermaklumat dan memberi anda idea yang lebih jelas tentang cara membuat butang yang menyerahkan borang dan memuat turun PDF secara serentak dengan bantuan JavaScript.

Atas ialah kandungan terperinci Bagaimana untuk mencipta butang yang menghantar borang dan memuat turun pdf pada masa yang sama?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Mereka bentuk API RESTful menggunakan NodeJS dan RestifyArtikel seterusnya：Mereka bentuk API RESTful menggunakan NodeJS dan Restify

Artikel berkaitan

Lihat lagi