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>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, 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, 2013</td>
     ...

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: ''
            };
            options = $.extend(defaults, options);
            var source = $(this).html();
            var d = new Date();
            var dd = d.getDate();
            var mm = d.getMonth() + 1; //January is 0!

            var yyyy = d.getFullYear();
            if (dd < 10) {
                dd = '0' + dd;
            }
            if (mm < 10) {
                mm = '0' + mm;
            }
            var today = dd + '-' + mm + '-' + yyyy;
            var OfficeRow = '';
            if (options.division || options.subDivision || options.section) {
                OfficeRow = '<div class="row" style="border-top: 0px;"><div class="col-xs-4" style="border-right: 1px solid black;">Division: ' + options.division + '</div><div class="col-xs-4" style="border-right: 1px solid black;">Sub Division: ' + options.subDivision + '</div><div class="col-xs-4">Section: ' + options.section + '</div></div>';
            }
              var cycleRow = '';
                if (options.cycle || options.fromDate || options.toDate) {
           cycleRow = '<div class="row" style="border-top: 0px; border-bottom: 0px;"><div class="col-xs-4" style="border-right: 1px solid black;">Survey Cycle: ' + options.cycle + '</div><div class="col-xs-4"...