Adjust exported html file to pdf

Question

I took an example from internet that is here : JS Fiddle

to generate PDF from data that are in the HTML.

however, in my case, the data was very misaligned.. let’s see;

My HTML:

<div class="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 function 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);
}

Answer 1

You need to put the table inside a div, and catch the id of that div instead of the id of table. Example:

<div id="tabela">
    <table>
    </table>
</div>

See working:

gerarRelatorio=function() {
   var pdf = new jsPDF('p', 'pt', 'letter');

   source = $('#tabela')[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);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
<div class="panel-body">
   <div id="tabela">
      <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>
</div>
<button onclick="gerarRelatorio();">PDF</button>