JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://pdfmake.org/build/pdfmake.min.js"></script>
<script src="http://pdfmake.org/build/vfs_fonts.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<br/>
<button id="print">Print</button>
<button id="download">Download</button>
<button id="open">Open</button>
<br/>
<br/>
<table id="printTable" class="table table-striped table-bordered table-condensed" style="font-size: 11px; margin-bottom: 0px;">
<tbody>
    <tr class="google-visualization-table-tr-head">
        <td>Division</td>
        <td>Sub Division</td>
        <td>Section</td>
        <td>No. of Problematic DTCs</td>
        <td>No. of Rectified DTCs</td>
        <td>No. of Pending for Rectification DTCs</td>
        <td>% No. of Problematic DTCs</td>
        <td>% No. of Rectified DTCs</td>
        <td>% No. of Pending for Rectification DTCs</td>
        <td>No. of Hotspots</td>
        <td>No. of Hotspots Rectified</td>
        <td>No. of Hotspots pending for Rectification</td>
        <td>% No. of Hotspots</td>
        <td>% No. of Hotspots Rectified</td>
        <td>% No. of Hotspots pending for Rectification</td>
    </tr>
    <tr>
        <td rowspan="14">HSR</td>
        <td rowspan="2">S08</td>
        <td>Bommanahalli</td>
        <td class="rightalign">131</td>
        <td class="rightalign">19</td>
        <td class="rightalign">112</td>
        <td class="rightalign">20</td>
        <td class="rightalign">14.5</td>
        <td class="rightalign">85.5</td>
        <td class="rightalign">246</td>
        <td class="rightalign">33</td>
        <td class="rightalign">213 kurwa</td>
        <td class="rightalign">8.94</td>
        <td class="rightalign">13.41</td>
        <td class="rightalign">86.59</td>
    </tr>
    <tr>
        <td style="display: none;">HSR</td>
        <td style="display: none;">S08</td>
        <td>Electronic city</td>
        <td class="rightalign">54</td>
        <td class="rightalign">35</td>
  ...

JavaScript

$(document).ready(function () {
    var reportOptions = {
        reportName: "Test Report",
        clientName: "BANGALORE ELECTRICITY SUPPLY COMPANY LIMITED",
        cycle: "Test",
        reportType: '',
        fileName: 'test-report',
        headerRows: 2,
        surveyCycle: 'Thermal Cycle 2',
        fromDate: '12-12-2014',
        toDate: '13-12-2014',
        division: 'Test Division',
        subDivision: 'Test SD',
        section: 'Demo Section',
        logoImage: 'http://66.85.142.42/RectificationRpt/smsbootstrap/img/ESCOM/mescom.jpg',
        pageSize: 'A3',
        pageOrientation: 'landscape',
    };
    $('#download').click(function () {
        reportOptions.reportType = 'download';
        $("#printTable").printPage(reportOptions);
    });

    $('#print').click(function () {
        reportOptions.reportType = 'print';
        $("#printTable").printPage(reportOptions);
    });

    $('#open').click(function () {
        reportOptions.reportType = 'open';
        $("#printTable").printPage(reportOptions);
    });
});


(function ($) {
    $.fn.extend({
        printPage: function (options) {
            var defaults = {
                separator: ',',
                ignoreColumn: [],
                tableName: 'yourTableName',
                reportType: 'download',
                escape: true,
                htmlContent: false,
                consoleLog: false,
                showGenDate: true,
                reportName: '',
                fileName: 'file-',
                logoImage: '',
                clientName: '',
                surveyCycle: '',
                fromDate: '',
                toDate: '',
                division: '',
                subDivision: '',
                section: '',
                pageSize: 'A4',
                pageOrientation: 'portrait',
                headerRows: 1,
                miscVal1: '',
                miscVal2: '',
                miscVal3: '',
                miscVal4: ''
           ...