To use jsPDF with an HTML and JavaScript form, the following steps can be followed:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
function generatePDF() {
// Extracting data from form fields
const name = document.getElementById("name").value;
const email = document.getElementById("email").value;
const phone = document.getElementById("phone").value;
// Creating a new instance of jsPDF
const doc = new jsPDF();
// Adding the data to the PDF document
doc.text(`Name: ${name}`, 10, 10);
doc.text(`Email: ${email}`, 10, 20);
doc.text(`Phone: ${phone}`, 10, 30);
// Saving the PDF document
doc.save("form-data.pdf");
}
<button onclick="generatePDF()">Generate PDF</button>
<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>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone"><br><br>
</form>
With the above setup, when a user fills in the form fields and clicks the "Generate PDF" button, the data will be extracted and added to the PDF document using jsPDF, and the document will be downloadable with the filename "form-data.pdf".
Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss
Asked: 2023-06-10 17:55:06 +0000
Seen: 17 times
Last updated: Jun 10 '23
What is the usage of JavaScript in IntelliJ IDEA Community Edition?
What is the issue with using java Gson().fromJson to assign BigDecimal values?
How can a custom loop function shape be altered to resemble Swift more accurately?
How can Django Admin accommodate a variety of formats and locales for its input fields?
How can an array be passed using typo3 flexform xml and itemsProcConfig?