Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to take HTML form data as text and send them to html2pdf?
The html2pdf is a JavaScript package that allows developers to convert the html to canvas, pdf, image, etc. It takes html as a parameter and adds that to the pdf or required document. Furthermore, it also allows users to download the document after adding the html content to that.
Here, we will access the form and add it to the pdf using the html2pdf npm package. We will see different examples of adding form data to pdf.
Syntax
Users can follow the syntax below to take html form data as text and send them to html2pdf.
var element = document.getElementById('form');
html2pdf().from(element).save();
In the above syntax, we have accessed the form using id and added it to the pdf using the html2pdf() method.
Example 1 (Adding the whole form to pdf)
In the example below, we have created the form and given ‘from’ as the id. Also, we have added some input elements inside the form. In JavaScript, we have accessed the form using its id and stored it in the ‘element’ variable.
After that, we used the html2pdf() method to add a form to the pdf. In the output, users can observe that when they click the submit button, it downloads the pdf with the form input labels and values.
<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>
Example 2 (Adding only form content to pdf)
In the example below, we will add the content of the form into the pdf rather than the whole form. We have created the form and added some input fields as we have done in the first example.
In JavaScript, we have accessed the value of every single input using its id. After that, we created the ‘div’ element using JavaScript and used the ‘innerHTML’ property to add the form content into the HTML of the div element.
Next, we create the pdf using the div element's content.
<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>
Users learned to add the form data into the pdf using the html2pdf. We just need to invoke the html2pdf() method, which will handle everything. In the first example, we added the whole form with input values in the pdf, and in the second example, we extracted the form data and added it to the pdf.
1K+ Views
