Generating PDF with jsPDF & Autotable

Generating PDF with jsPDF & Autotable

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>

 

READ  Redis Caching in Node.js

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();
});

 

READ  React File Uploader With Express (Using React Hooks)

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.

READ  Build a Simple Password Generator in Node.js - Coding Shiksha

 

Leave a Reply

Close Menu