html2pdf is a JavaScript package that allows developers to convert html to canvas, pdf, images, and more. It takes html as parameter and adds it to pdf or desired document. Additionally, it allows users to download the document after adding html content.
Here we will access the form and add it to the pdf using the html2pdf npm package. We will see different examples to add form data to pdf.
grammar
Users can follow the following syntax to send html form data as text and send it to html2pdf.
var element = document.getElementById('form');
html2pdf().from(element).save();
In the above syntax, we access the form using the id and add it to the pdf using the html2pdf() method.
In the example below, we create the form and specify "from" as the id. Additionally, we have added some input elements to the form. In JavaScript, we access the form using its id and store it in the "element" variable.
After that, we use the html2pdf() method to add a form to the pdf. In the output, the user can observe that when they click on the submit button, it downloads the pdf with the form input tags 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 (only add form content to pdf)
In the example below, we will add the content of the form to the PDF, rather than the entire form. We have created the form and added some input fields like in the first example.
In JavaScript, we use the id of each input to access its value. After that, we created a "div" element using JavaScript and added the form content to the HTML of the div element using the "innerHTML" attribute.
Next, we use the content of the div element to create the pdf.
<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 use html2pdf to add form data to pdf. We just need to call the html2pdf() method and it will handle everything. In the first example we added the entire form with the input values ??in the pdf, in the second example we extracted the form data and added it to the pdf.
The above is the detailed content of How to get HTML form data as text and send to html2pdf?. For more information, please follow other related articles on the PHP Chinese website!