jsPDF & autoTable

jsPDF & autoTable Demostração resultados

by sergio sereno

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/jspdf.plugin.autotable.min.js"></script>
<p></p>
<button onclick="printHTML();">PDF</button>
<p></p>
<div id="ReportTitle">
  <div>
    <div id ='header1'>YET</div>
    <div id ='header2'>Financial Statement Report</div>
    <div id ='header3'>January 1, 2018 - February 6, 2018</div>
  </div>
</div>
<table id="table-content">
  <tr>
    <th>RUBRICAS</th>
    <th>ANO ANTERIOR</th>

  </tr>
  <tr>
    <td id="header">ACTIVO</td>
  </tr>
  <tr>
    <td>Ativo não corrente</td>
    <td>1000 €</td>
    <td>900 €</td>
  </tr>
  <tr>
    <td>Ativos fixos tangíveis</td>
    <td>100 €</td>
    <td>0 €</td>
  </tr>
  <tr>
    <td>Propriedades de investimento</td>
    <td>0 €</td>
    <td>0 €</td>
  </tr>
  <tr>
    <td>Goodwill</td>
    <td>0 €</td>
    <td>0 €</td>
  </tr>
  <tr>
    <td>Ativos intangíveis</td>
    <td>0 €</td>
    <td>0 €</td>
  </tr>
    <tr>
    <td>Ativos biológicos</td>
    <td>0 €</td>
    <td>0 €</td>
  </tr>
    <tr>
    <td>Participações financeiras - método da equivalência patrimonial</td>
    <td>0 €</td>
    <td>0 €</td>
  </tr>
    <tr>
    <td>Outros investimentos financeiros</td>
    <td>0 €</td>
    <td>0 €</td>
  </tr>
    <tr>
    <td>Créditos a receber</td>
    <td>0 €</td>
    <td>0 €</td>
  </tr>
    <tr>
    <td>Ativos por impostos diferidos</td>
    <td>0 €</td>
    <td>0 €</td>
  </tr>
    <tr>
    <td id="subtotal">Total do ativo</td>
    <td>0 €</td>
    <td>0 €</td>
  </tr>
</table>

CSS

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

.class-header{
  font-weight: bold;
}

JavaScript

function printHTML() {

  var doc = new jsPDF('p', 'pt');

  var res = doc.autoTableHtmlToJson(document.getElementById("table-content"));

  var header = function() {
  	
    var header1 = document.getElementById("header1").innerHTML;
    var header2 = document.getElementById("header2").innerHTML;
    var header3 = document.getElementById("header3").innerHTML;

    doc.setFontSize(13);
    doc.setFontType("bold");
		doc.text(header1 + ' - ' + header2 , 20, 40);
    
    doc.setFontSize(9);
    doc.setFontType("normal");
		doc.text(header3, 20, 52);
    
    doc.setDrawColor(255,255,255,255);
    doc.setLineWidth(2);
    doc.line(20, 56, 555, 56); 
  };

  var options = {
  	theme: "plain",  // 'striped', 'grid' or 'plain'
    beforePageContent: header,
    margin: {
      top: 80,
      left: 20
    },
    headerStyles: {
    	font: "helvetica",
      textColor: 0,
      lineWidth: 0.5,
      halign: 'center', 
    	valign: 'middle'
    },
    styles: {
      cellPadding: 3,
    	fontSize: 10,
      font: "helvetica",
      lineWidth: 0
    },
		
    createdCell: function(cell, data) {
    	switch (data.row.raw[0].id) {
      	case "header":
          cell.styles.fontStyle  = 'bold';
          cell.styles.halign  = 'center';
          cell.styles.cellPadding  = 10;
          break;
          
        case "subtotal":
          cell.styles.fontStyle  = 'bold';
   				cell.styles.lineWidth = 0.5;
          break;
      }
      
      if (data.column.index === 1 || data.column.index === 2) {
      	cell.styles.halign  = 'right';
      }
  	}  
  };

  doc.autoTable(res.columns, res.data, options);
	
  doc.save("table.pdf");
}