JSFiddle - React, Tailwind, and code Playground

by santeriv

HTML

<!-- from https://bobswift.atlassian.net/wiki/display/TBL/CSV+Macro -->
<table class="confluenceTable tablesorter">
    <thead>
        <tr class="sortableHeader">
            <th class="confluenceTh sortableHeader" data-column="0">
                <div class="tablesorter-header-inner">
                    <div class="tablesorter-header-inner">Parameter</div>
                </div>
            </th>
            <th class="confluenceTh sortableHeader" data-column="1">
                <div class="tablesorter-header-inner">
                    <div class="tablesorter-header-inner">Default</div>
                </div>
            </th>
            <th class="confluenceTh sortableHeader" data-column="2">
                <div class="tablesorter-header-inner">
                    <div class="tablesorter-header-inner">Macro Browser Label</div>
                </div>
            </th>
            <th colspan="1" class="confluenceTh sortableHeader" data-column="3">
                <div class="tablesorter-header-inner">
                    <div class="tablesorter-header-inner">Description</div>
                </div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="confluenceTd"><strong>output</strong>
            </td>
            <td class="confluenceTd">html</td>
            <td class="confluenceTd">Output format</td>
            <td colspan="1" class="confluenceTd">
                <p class="p1">Determines how the output is formatted. Use wiki to have the data in the table rendered by the wiki renderer.</p>
            </td>
        </tr>
        <tr>
            <td colspan="1" class="confluenceTd"><strong>script</strong>
            </td>
            <td colspan="1" class="confluenceTd">macro body</td>
            <td colspan="1" class="confluenceTd">Location of CSV data</td>
            <td colspan="1" class="confluenceTd">
                <p>If a location of data is specified, the included data will follow the body...

JavaScript

/* originally based on https://gist.github.com/3782074 */
jQuery.fn.toCSV = function () {
    var data = $(this).first(); //Only one table
    var csvData = [];
    var tmpArr = [];
    var tmpStr = '';
    data.find("tr").each(function () {
        /*if($(this).find("th").length) {
          $(this).find("th").each(function() {
            tmpStr = $(this).text().replace(/"/g, '""');
            tmpArr.push('"' + tmpStr + '"');
          });
          csvData.push(tmpArr);
      } else {*/
        tmpArr = [];
        $(this).find("td").each(function () {
            if ($(this).text().match(/^-{0,1}\d*\.{0,1}\d+$/)) {
                tmpArr.push(parseFloat($(this).text()));
            } else {
                tmpStr = $(this).text().replace(/"/g, '""');
                tmpArr.push('"' + tmpStr + '"');
            }
        });
        csvData.push(tmpArr.join(','));
        /* } */
    });
    var output = csvData.join('\n');
    var uri = 'data:application/csv;charset=UTF-8,' + encodeURIComponent(output);
    data.before('<a id="table2csvlink" href="' + uri + '" download="' + document.title + '.csv">download .csv</a>');
    /*window.open(uri);*/
}
/* example */
$('.confluenceTable').toCSV();