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>