1

Estou trabalhando em um projeto que necessita tranformar uma página HTML em um arquivo PDF. Estou utilizando o plugin jsPDF. Existem muitos exemplos de como transformar htmls em pdf, "mas", todos os exemplos que vi, utilizam apenas tag de texto como p - h1 - span. Meu probelma é que os dados que quero tranformar em PDF estão dentro de um form. Quando faço download do arquivo, somente aparece um h1 e as label do form, porém os valores do input não é renderizado no arquivo PDF. Alguém saberia como trazer também os valores digitados dentro dos inputs? Se é que existe como.

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>

2
  • Segundo que andei lendo nesse tópico stackoverflow.com/a/46234404/4312593 não é possível ler valores de entrada. 13/06/2018 às 15:00
  • Entendi, putz que chato, os cara desenvolvem um plugin que não funciona 100%. Será que não pensaram que as pessoas poderiam querer baixar um pdf com informações de um form?! Mas agradeço muito pela ajuda aí cara. Obrigado!!
    – LeAndrade
    13/06/2018 às 15:22

1 Resposta 1

2

Eu estava tendo um problema parecido, mas consegui gerar o PDF a partir do form, só que precisei adicionar um pouco de jquery, usei estes scripts externos:

<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>

Vou pegar como exemplo esta parte do seu código:

<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>

Para pegar o valor de input e usar no PDF, você terá que transformá-lo em uma var primeiro, desta forma:

Pegando pela id do seu input

var doc = new jsPDF;

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

e depois escrevendo com doc.text

doc.text( 20, 20, tel );

Lembrando que sem as aspas usadas para escrita de texto.

1
  • Espero ter me feito entender, qualquer coisa eu tento explicar novamente. É minha primeira respostas e sei que a pergunta é "antiga", mas bom, está aí 28/08/2018 às 18:11

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .