資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何建立一個同時提交表單並下載PDF檔案的按鈕？
透過使用HTML、JavaScript和jsPDF，我們可以建立一個可以同時提交表單並下載PDF檔案的按鈕。我們將使用HTML建立表單，使用JavaScript處理提交過程，並使用jsPDF生成PDF文件。提交表單並獲取PDF是使用最頻繁的用例之一。在網際網路上，PDF是文件的常用格式。它們可以用於跟蹤合同、發票和其他重要資料。在許多情況下，必須先提交表單才能接收PDF。讓我們詳細討論整個過程。
開發表單
對於任何線上應用程式，表單都是必要的元件。它們使我們能夠收集使用者資料並將其傳輸到伺服器。我們將使用HTML構建表單。這是一個包含五個輸入欄位的簡單表單示例：
<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>
我們將使用名為downloadPDF()的函式同時下載和提交表單。
function downloadPDF() { .....CODE HERE …… }
<button onclick="downloadPDF()">Submit & Download PDF/button>
生成PDF
我們將使用jsPDF包來建立PDF。jsPDF是一個用於建立PDF的JavaScript客戶端庫。它使我們能夠即時生成PDF，而無需任何伺服器端處理。此程式碼中包含的JavaScript方法建立一個PDF檔案並將其下載到使用者的裝置。當用戶點選網站上的按鈕時，該函式被啟用。以下是使用jsPDF建立PDF的示例：
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");
}
整合表單和PDF生成
既然我們有了表單和建立PDF的方法，我們現在可以將兩者結合起來。我們將設計一個按鈕，該按鈕同時提交表單並下載PDF。這是一個同時提交表單並下載PDF的JavaScript按鈕示例：
<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>
在本文中，我們探索了令人興奮的Web開發世界，並發現瞭如何使用JavaScript建立一個不僅提交表單而且還能同時下載PDF檔案的按鈕。我們逐步介紹了使用HTML建立表單、使用JavaScript處理提交過程以及使用jsPDF生成PDF文件的步驟。透過結合這些強大的技術，我們成功地建立了一個只需單擊一下即可執行這兩個功能的按鈕。我希望本文對您有所幫助，並使您更清楚地瞭解如何使用JavaScript建立一個同時提交表單並下載PDF檔案的按鈕。
3K+ 次瀏覽
