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  Basic CRUD Application in VUE with Firebase

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  [LIVE CODING] jsPDF Autotable Documentation with Source Code

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  How to Preview Image Before Upload Using Javascript

 

Leave a Reply

Close Menu

Indian Desi Tools - Ultimate Tools Website

Demo Description


This will close in 20 seconds