How do I export the values of a form to PDF with the jsPDF plugin?

Question

I am working on a project that needs to turn a page HTML in an archive PDF. I’m using the plugin jsPDF. There are many examples of how to turn htmls into pdf, "but", all examples I’ve seen use only text as p - h1 - span. My problem is that the data I want to transfer to PDF is inside a form. When I download the file, only one appears h1 and the label of the form, but the input values are not rendered in the PDF file. Would anyone know how to also bring the input values inside the inputs? If there is such a thing as.

function Pdf() {
		
  var pdf = new jsPDF('p', 'pt', 'letter');	
			
  pdf.fromHTML($("#myBody")[0], 15, 15, {
    'width': 210
  });
				
  pdf.save('PDF.pdf');
      
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script>
	<script src="https://cdn.rawgit.com/MrRio/jsPDF/master/libs/html2pdf.js"></script>

<div class="container" style="margin-top:20px">

  <form action="#" method="Post" id="form" style="margin-left:15px">
    
    <h1 class="text-center" style="text-decoration:underline">FORMULÁRIO</h1><br><br>

    <div class="form-row">
      <div class="form-group col-md-6">
        <label for="email">Email: </label>
          <input type="email" class="form-control" id="email" placeholder="Email">
      </div>
      <div class="form-group col-md-6">
        <label for="tel">Telefone: </label>
          <input type="tel" class="form-control" id="tel" placeholder="Digite o telefone">
      </div>
      <div class="form-group col-md-12">
        <label for="ender">Endereço: </label>
          <input type="text" class="form-control" id="ender" placeholder="Digite o endereço">
      </div>
    </div>
    <div class="form-row">
      <div class="form-group col-md-4">
        <label for="cidade">Cidade: </label>
          <input type="text" class="form-control" id="cidade">
      </div>
      <div class="form-group col-md-4">
        <label for="estado">Estado: </label>
          <select id="estado" class="form-control">
            <option selected>Escolha</option>
            <option>SP</option>
            <option>RJ</option>
            <option>MG</option>
          </select>
      </div>
      <div class="form-group col-md-4">
         <label for="cep">Cep: </label>
         <input type="text" class="form-control" id="cep">
      </div>
    </div>
		
  </form>
  <input type="button" value="DOWNLOAD" class="btn btn-primary" id="btn" onclick="Pdf()">
</div>

Answer 1

I was having a similar problem, but I managed to generate the PDF from the form, only I needed to add some jquery, I used these external scripts:

<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

I’ll take as an example this part of your code:

<div class="form-group col-md-6">
    <label for="tel">Telefone: </label>
      <input type="tel" class="form-control" id="tel" placeholder="Digite o telefone">
</div>

To take the input value and use in PDF, you will have to turn it into a var first, this way:

Picking up by the id of your input

var doc = new jsPDF;

    var tel = $( '#tel' ).val();

and then writing with doc.text

doc.text( 20, 20, tel );

Remembering that without the quotation marks used for writing text.