How to export values from a form to PDF with the jsPDF plugin?

Question

How to export values from a form to PDF with the jsPDF plugin?

Navigation

#1 by (0 votes)

0

I'm working on a project that needs to transform a HTML page into a PDF file. I'm using the jsPDF plugin. There are many examples of how to convert htmls to pdf, "but" , all the examples I saw, only use text tag as p - h1 - span . My problem is that the data I want to convert into PDF is inside a form. When I download the file, only h1 and label of the form appear, but the input values are not rendered in the PDF file. Would anyone know how to bring the entered values into the inputs as well? If that exists 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><scriptsrc="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><divclass="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>

javascript jquery jspdf

asked by anonymous 13.06.2018 / 16:30

1 answer

ORACLE SQL - Complex report I want to transform SQL to Eloquent from Laravel?

score 0 · Answer 1

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

<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script><scriptsrc="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 get the value of input and use in PDF, you will have to transform it into a var first, like this:

Picking up your input id

var doc = new jsPDF;

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

and then writing with doc.text

doc.text( 20, 20, tel );

Remembering that without the quotes used for writing text.