Welcome folks I am back with another blog post. In this post I will be talking about Generating Pdf with jsPDF & AutoTable.So let’s get started with the application.

<table border="1" id="example" class="sfc_table">
  <thead>
    <tr>
      <th>PART NUMBER</th>
      <th>COST</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2" class="innerHeader March">March</td>
    </tr>
    <tr>
      <td>ThisEXAMPLE</td>
      <td>£40.00</td>
    </tr>
    <tr>
      <td align="right">Your spend this month:</td>
      <td>£40.00</td>
    </tr>
    <tr class="total">
      <td align="right">Your total spend</td>
      <td>£40.00</td>
    </tr>
  </tbody>
</table>

<div class="grid_24 footer">
  <hr>
  <div class="grid_6 push_18">
    <a class="btn" id="export" href="summary.html">Export</a>
  </div>

</div>

Now we add some Javascript code to the table so that we can export it to the pdf format to download.

function generate() {
      var doc = new jsPDF('p', 'pt', 'a4');

      var elem = document.getElementById('example');
      var data = doc.autoTableHtmlToJson(elem);
      doc.autoTable(data.columns, data.rows, {
                tableLineColor: [189, 195, 199],
        tableLineWidth: 0.75,
        styles: {
            font: 'Meta',
            lineColor: [44, 62, 80],
            lineWidth: 0.55
        },
        headerStyles: {
            fillColor: [0, 0, 0],
            fontSize: 11
        },
        bodyStyles: {
            fillColor: [216, 216, 216],
            textColor: 50
        },
        alternateRowStyles: {
            fillColor: [250, 250, 250]
        },
        startY: 100,
        drawRow: function (row, data) {
            // Colspan
            doc.setFontStyle('bold');
            doc.setFontSize(10);
            if ($(row.raw[0]).hasClass("innerHeader")) {
                doc.setTextColor(200, 0, 0);
                doc.setFillColor(110,214,84);
                doc.rect(data.settings.margin.left, row.y, data.table.width, 20, 'F');
                doc.autoTableText("", data.settings.margin.left + data.table.width / 2, row.y + row.height / 2, {
                    halign: 'center',
                    valign: 'middle'
                });
               /*  data.cursor.y += 20; */
            };

            if (row.index % 5 === 0) {
                var posY = row.y + row.height * 6 + data.settings.margin.bottom;
                if (posY > doc.internal.pageSize.height) {
                    data.addPage();
                }
            }
        },
        drawCell: function (cell, data) {
            // Rowspan
            console.log(cell);
            if ($(cell.raw).hasClass("innerHeader")) {
						doc.setTextColor(200, 0, 0);
                    doc.autoTableText(cell.text + '', data.settings.margin.left + data.table.width / 2, data.row.y + data.row.height / 2, {
                    halign: 'center',
                    valign: 'middle'
                });
                
                return false;
            }
        }
    }); 
     doc.save("table.pdf");
    }

$('#export').click(function (e) {
	e.preventDefault();   
    generate();
});

Thanks for reading this post and if you like reading this and wants to read more of this please subscribe the blog below to get all the notications.