I have taken an example of internet here: JS Fiddle
to generate PDF from data that is in HTML .
However, in my case, the data was very misaligned .. let's see;
MyHTML:
<divclass="panel-body">
<table id="idTabela" class="table">
<thead>
<tr>
<th>Id</th>
<th>Nome</th>
<th>Código DNE</th>
<th>Opções</th>
</tr>
</thead>
<tbody ng-repeat="dis in distritos " >
<tr>
<td>{{dis.idDistrito}}</td>
<td>{{dis.nome}}</td>
<td>{{dis.codigoDne}}</td>
<td>
<div class="btn-group">
<button id="opcoes" type="button"
class="btn btn-danger vermDigifred btn-xs dropdown-toggle glyphicon glyphicon-pencil"
data-toggle="dropdown"> </button>
<ul class="dropdown-menu" role="menu">
<li><a id="btnExcluirRegistro"
ng-click="excluirDistritos(dis)">
<span class="glyphicon glyphicon-trash"></span> Excluir registro
</a>
</li>
<li>
<a id="btnAlterarRegistro"
data-toggle="modal" data-target="#modalAlterarDistrito"
ng-click="alterarDistritos(dis)" >
<span class="glyphicon glyphicon-edit"></span> Alterar registro
</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
My role that generates the report
gerarRelatorio=function() {
var pdf = new jsPDF('p', 'pt', 'letter');
source = $('#idTabela')[0];
specialElementHandlers = {
'#bypassme': function (element, renderer) {
return true
}
};
margins = {
top: 80,
bottom: 60,
left: 10,
width: 700
};
pdf.fromHTML(
source, // HTML string or DOM elem ref.
margins.left, // x coord
margins.top, { // y coord
'width': margins.width, // max width of content on PDF
'elementHandlers': specialElementHandlers
},
function (dispose) {
pdf.save('rel.pdf');
}, margins);
}