JSFiddle - React, Tailwind, and code Playground

by Pradeep Shankar

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">
    <thead>
        <tr>
            <th rowspan="2" class="text-center" style="vertical-align: middle;">SL. No</th>
            <th rowspan="2" class="text-center" style="vertical-align: middle;">Feeder</th>
            <th rowspan="2" class="text-center" style="vertical-align: middle;">DTCName</th>
            <th rowspan="2" class="text-center" style="vertical-align: middle;">Date of hot spot identified</th>
            <th colspan="12" class="text-center" style="vertical-align: middle;">Problematic Parts of DTC</th>
            <th style="display: none;"></th>
            <th style="display: none;"></th>
            <th style="display: none;"></th>
            <th style="display: none;"></th>
            <th style="display: none;"></th>
            <th style="display: none;"></th>
            <th style="display: none;"></th>
            <th style="display: none;"></th>
            <th style="display: none;"></th>
            <th style="display: none;"></th>
            <th style="display: none;"></th>
        </tr>
        <tr>
            <th style="display: none;"></th>
            <th style="display: none;"></th>
            <th style="display: none;"></th>
            <th style="display: none;"></th>
            <th>PBY</th>
            <th>PBB</th>
            <th>SBR</th>
            <th>SBY</th>
            <th>SBB</th>
            <th>LT Kit</th>
            <th>GOS_r</th>
            <th>GOS_y</th>
            <th>GOS_b</th>
            <th>DOLO_r</th>
            <th>DOLO_y</th>
            <th>DOLO_b</th>
        </tr>
   ...

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: '',
           ...