JSFiddle - React, Tailwind, and code Playground

by navinleon

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.1.0/jspdf.plugin.autotable.src.js"></script>
<button type="button" onclick="DownloadSchedulePDF()">
Download PDF
</button>
<div id="content" style="color:gray;font-size:30px">
This is a test pdf
</div>
<table id="schedule" cellspacing="0" cellpadding="4" rules="all" border="1" id="ctl00_ContentPlaceHolder_scheduleGrid" style="background-color:White;border-color:#3366CC;border-width:1px;border-style:None;width:200px;border-collapse:collapse;">
			<tbody>
      <tr style="color:White;background-color:#5D7B9D;font-weight:bold;">
				<th scope="col" style="background-color:white;color:red;width:100px;">Slots</th><th title="Allowed Equipment Type: ALL" class="dockTd" scope="col" style="
    background-color: inherit;
">CRANE A-BAY 6</th>
</tr>
<tr>
  <td style="color:green">123</td>
  <td>abc</td>
</tr>
<tr>
  <td style="color:green">123</td>
  <td>abc</td>
</tr>
<tr>
  <td style="color:green">123</td>
  <td>abc</td>
</tr>
<tr>
  <td style="color:green">123</td>
  <td>abc</td>
</tr><tr>
  <td style="color:green">123</td>
  <td>abc</td>
</tr>
<tr>
  <td style="color:green">123</td>
  <td>abc</td>
</tr>
<tr>
  <td style="color:green">123</td>
  <td>abc</td>
</tr>
<tr>
  <td style="color:green">123</td>
  <td>abc</td>
</tr>
<tr>
  <td style="color:green">123</td>
  <td>abc</td>
</tr>
<tr>
  <td style="color:green">123</td>
  <td>abc</td>
</tr>
<tr>
  <td style="color:green">123</td>
  <td>abc</td>
</tr>
<tr>
  <td style="color:green">123</td>
  <td>abc</td>
</tr>
<tr>
  <td style="color:green">123</td>
  <td>abc</td>
</tr>
<tr>
  <td style="color:green">123</td>
  <td>abc</td>
</tr>
<tr>
  <td style="color:green">123</td>
  <td>abc</td>
</tr>
<tr>
  <td style="color:green">123</td>
  <td>abc</td>
</tr>
<tr>
  <td style="color:green">123</td>
  <td>abc</td>
</tr>
<tr>
  <td style="color:green">123</td>
 ...

JavaScript

var pdfInColor = true;
var landscape = true;
var paperFormat = "a4";
var tableCellsStyles;

function DownloadSchedulePDF() {
var specialElementHandlers = {
	'#editor': function(element, renderer){
		return true;
	}
};
    var orientation = landscape ? 'l' : 'p'
    var doc = new jsPDF(orientation, 'pt', paperFormat, true);
    doc.text("Schedule", 40, 50);
    
     doc.fromHTML($('#content').get(0), 720, 65, {
	'width': 190, 
	'elementHandlers': specialElementHandlers
});

doc.setDrawColor(0);
doc.setFillColor(255, 0, 0);
doc.rect(40, 50, 30, 12, 'FD'); //Fill and Border
    
    var res = GetTableJSON(document.getElementById("schedule"));
    tableCellsStyles = res.styles;
    doc.autoTable(res.columns, res.data, {
        theme: 'plain',
        startY: 60,
        pageBreak: 'auto',
        margin: 20,
        tableWidth: 'auto',
        columnStyles: {
    0: {columnWidth: 100},
    1: {columnWidth: 100}
},
        styles: {
            lineWidth: 0.01,
            lineColor: 0,
            fillStyle: 'DF',            
            halign: 'center',
            valign: 'middle',
            columnWidth: 'auto',
            overflow: 'linebreak'
        },
        createdHeaderCell: function (cell, data) {
            ApplyCellStyle(cell, "th", data.column.dataKey);
        },
        createdCell: function (cell, data) {
            ApplyCellStyle(cell, data.row.index, data.column.dataKey);
        },
        drawHeaderCell: function (cell, data) {
            //ApplyCellStyle(cell, "th", data.column.dataKey);
            //data.table.headerRow.cells[data.column.dataKey].styles = cell.styles;
            //ApplyCellStyle(data.table.headerRow.cells[data.column.dataKey], "th", data.column.dataKey);
        },
        drawCell: function (cell, data) {
            if (cell.raw === undefined)
                return false;
            if(cell.raw.indexOf("*") > -1) {
                var text = cell.raw.split("*")[0];
                var times =...