JSFiddle - React, Tailwind, and code Playground

by Terry Young

HTML

<div id="dvData">
<table>
    <tr>
        <th>Column One </th>
        <th>Column Two</th>
        <th>Column Three</th>
    </tr>
    <tr>
        <td>row1 Col1</td>
        <td>row1 Col2</td>
        <td>row1 Col3</td>
   </tr>
   <tr>
        <td>row2 Col1</td>
        <td>row2 Col2</td>
        <td>row2 Col3</td>
   </tr>
      <tr>
        <td>row3 Col1</td>
        <td>row3 Col2</td>
        <td>row3 Col3</td>  
   </tr>
</table>
</div>
<br/>
<input type="button" id="btnExport" value=" Export Table data into Excel " />

CSS

body
{
    font-size: 12pt;
    font-family: Calibri;
    padding : 10px;
}

table
{
    border: 1px solid black;
    
}
th
{
    border: 1px solid black;
    padding: 5px;
    background-color:grey;
    color: white;
    
}
td
{
    border: 1px solid black;
    padding: 5px;
}

input
{
    font-size: 12pt;
    font-family: Calibri;
}

JavaScript

$(document).ready(function(){
    $("#btnExport").click(function(e) {
        var msg = GetMimeTypes();
        /*
        //OpenOffice
        window.open('data:application/vnd.oasis.opendocument.spreadsheet,' + $('#dvData').html());
        //MS-Excel
        window.open('data:application/vnd.ms-excel,' + $('#dvData').html());
        */
        
        
        //CSV
        var $table = $('#dvData'),
            szRowDelimiter = String.fromCharCode(0),
            szColDelimiter = String.fromCharCode(11),
            $rows = $('tr:has(td)'),
            $link = $('<a>'),
            csv =  $rows.map(function (i, row) {
                return $(row).find('td').map(function (j, col) {
                    return $(col).text();
                }).get().join(szColDelimiter);
            }).get().join(szRowDelimiter)
            .split(szColDelimiter).join('","')
            .split(szRowDelimiter).join('"\r\n"');
        csv = '"' + csv + '"';
        console.log(csv);
        //window.open('data:text/csv;charset=utf-8,' + encodeURIComponent(csv));
        $link.attr({
            'href': 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv),
            'target': '_blank',
            'download': 'file.csv'
        }).text('download').appendTo('body').click().remove();
        return false;
    });
});

function GetMimeTypes () {
    var message = "";
        // Internet Explorer supports the mimeTypes collection, but it is always empty
    if (navigator.mimeTypes && navigator.mimeTypes.length > 0) {
        var mimes = navigator.mimeTypes;
        for (var i=0; i < mimes.length; i++) {
            message += "<b>" + mimes[i].type + "</b> : " + mimes[i].description + "<br />";
        }
    }
    else {
        message = "Your browser does not support this ";
       //sorry!
    }

    return ( message);
}