Create CSV download link

FX, Chrrome, IE10+

by jdcast

HTML

<h1>Data</h1>

<button onclick="newRow()">New Row</button>
<button onclick="newCol()">New Column</button>
<table>
    <tr>
        <td>
            <input type="text" />
        </td>
    </tr>
</table>
<button onclick="makeCSV()">Make CSV</button>

<h1>CSV Data</h1>

<div class="csvHolder">
    <div id="csv"></div>
</div>
<div id="downloadLink"></div>

CSS

h1 {
    font-family:"Trebuchet MS", Helvetica, sans-serif;
    font-size: 28pt;
}
#csv {
    white-space: pre;
    font-family:"Courier New", Courier, monospace;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background-color: white;
    padding: 5px;
    
    background-repeat: no-repeat;
    background-position: right top;
background-image:...

JavaScript

function makeCSV() {
    var csv = "";
    $("table").find("tr").each(function () {
        var sep = "";
        $(this).find("input").each(function () {
            csv += sep + $(this).val();
            sep = ",";
        });
        csv += "\n";
    });
    $("#csv").text(csv);

    window.URL = window.URL || window.webkitURL;
    var blob = new Blob([csv]);
    var blobURL = window.URL.createObjectURL(blob);
    $("#downloadLink").html("");
    $("<a></a>").
    attr("href", blobURL).
    attr("download", "data.csv").
    text("Download Data").
    appendTo('#downloadLink');
}

function newRow() {
    $("table").find("tr:last").clone().appendTo($("table"));
    $("table").find("tr:last").find("input").each(function () {
        var randomnumber = Math.floor(Math.random() * 100);
        $(this).val(randomnumber);
    });
}

function newCol() {
    $("table").find("tr > td:last").clone().appendTo($("tr"));
    $("table").find("tr").find("input:last").each(function () {
        var randomnumber = Math.floor(Math.random() * 100);
        $(this).val(randomnumber);
    });
}

$(document).ready(function () {
    // from: http://www.javascriptkit.com/javatutors/randomnum.shtml
    var randomnumber = Math.floor(Math.random() * 100);
    $("input").val(randomnumber);
});