How to get HTML form data as text and send to html2pdf?-HTML Tutorial-php.cn

How to get HTML form data as text and send to html2pdf?

WBOY

Release： 2023-09-06 12:21:15

forward

1453 people have browsed it

How to get HTML form data as text and send to html2pdf?

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();

Copy after login

In the above syntax, we access the form using the id and add it to the pdf using the html2pdf() method.

Example 1 (Add entire form to pdf)

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>

Copy after login

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>

Copy after login

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!