JSFiddle - React, Tailwind, and code Playground

by Pradeep Shankar

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<button id="printpage" class="btn btn-sm btn-primary">PDF</button>
<br/>
<br/>
<table id="printTable" class="table table-striped">
    <thead>
        <tr class='warning'>
            <th>Country</th>
            <th>Population</th>
            <th>Date</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Chinna</td>
            <td>1,363,480,000</td>
            <td>March 24, 2014</td>
            <td>19.1</td>
        </tr>
        <tr>
            <td><a href="#">India</a></td>
            <td>1,241,900,000</td>
            <td>March 24, 2014</td>
            <td>17.4</td>
        </tr>
        <tr>
            <td colspan="2">United States</td>
           
            <td>March 24, 2014</td>
            <td>4.44</td>
        </tr>
        <tr>
            <td>Indonesia</td>
            <td>249,866,000</td>
            <td>July 1, 2013</td>
            <td>3.49</td>
        </tr>
        <tr>
            <td>Brazil</td>
            <td>201,032,714</td>
            <td>July 1, 2013</td>
            <td>2.81</td>
        </tr>
        <tr>
            <td>Chinna</td>
            <td>1,363,480,000</td>
            <td>March 24, 2014</td>
            <td>19.1</td>
        </tr>
        <tr>
            <td>India</td>
            <td>1,241,900,000</td>
            <td>March 24, 2014</td>
            <td>17.4</td>
        </tr>
        <tr>
            <td>United States</td>
            <td>317,746,000</td>
            <td>March 24, 2014</td>
            <td>4.44</td>
        </tr>
        <tr>
            <td>Indonesia</td>
            <td>249,866,000</td>
            <td>July 1, 2013</td>
            <td>3.49</td>
        </tr>
        <tr>
            <td>Brazil</td>
            <td>201,032,714</td>
            <td>July 1,...

JavaScript

$(document).ready(function () {
    $('#printpage').click(function () {
        $("#printTable").printPage({
            DTCType: "Normal",
            reportName: "Test Report",
            division: "Test",
            clientName: "ELECTRICITY SUPPLY COMPANY LIMITED <br />(Government of Karnataka Undertaking)",
            cycle: "Test"
        });
    });
});



(function ($) {
    $.fn.extend({
        printPage: function (options) {
            var defaults = {
                DTCType: '',
                division: '',
                subDivision: '',
                section: '',
                cycle: '',
                reportName: '',
                clientName: '',
                fromDate: '',
                toDate: '',
                ignoreColumn: []
            };
            options = $.extend(defaults, options);
            var el = this.get(0);
            
  //////////          
            
               var excel = "<table border='1' width='100%' style='font-size:11px; border: 1px solid black'>";
                // Header
 var tdData = "";
               $(el).find('thead').find('tr').each(function() {
                    excel += "<tr>";
                    var cell;
                    if ($(this).hasClass('google-visualization-table-tr-head')) {
                        cell = 'td';
                    }
                    else {
                        cell = 'th';
                    }
                    $(this).find(cell).each(function(index, data) {
                        if ($(this).css('display') != 'none') {
                            if (options.ignoreColumn.indexOf(index) == -1) {
                                excel += "<th>" + parseString($(this)) + "</th>";
                            }
                        }
                    });
                    excel += '</tr>';

                });


                // Row Vs Column
                var rowCount = 1;
                var colCount;
               ...