Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!doctype html>
<html lang="en">
  <head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
    <meta charset="utf-8" />
    <title>CSV generator</title>
  </head>
  <body>
    <table id=table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Title</th>
          <th>Amount</th>
          <th>Price</th>
        </tr>  
      </thead>
      <tbody>
        <tr>
          <td><input></td>
          <td><input></td>
          <td><input></td>
          <td><input></td>
        </tr>
        <tr>
          <td><input></td>
          <td><input></td>
          <td><input></td>
          <td><input></td>
        </tr>
        <tr>
          <td><input></td>
          <td><input></td>
          <td><input></td>
          <td><input></td>
        </tr>
      </tbody>
    </table>
    <input id=btnDownload type="button" value="download csv">
  </body>
</html>
 
$('#btnDownload').on('click', function(){
    var data=[];
    data.push($('#table th').map(function(){
        return $(this).text()
    }).toArray());
    $('#table tbody tr').each(function(){
        data.push($(this).find('input').map(
            function(){
                return $(this).val()
            }).toArray());
    });
    csvGenerator = new CsvGenerator(data, 'my_table.csv');
    csvGenerator.download(true);
})
function CsvGenerator(dataArray, fileName, separator, addQuotes) {
    this.dataArray = dataArray;
    this.fileName = fileName;
    this.separator = separator || ',';
    this.addQuotes = !!addQuotes;
    if (this.addQuotes) {
        this.separator = '"' + this.separator + '"';
    }
    this.getDownloadLink = function () {
        var separator = this.separator;
        var addQuotes = this.addQuotes;
        var rows = this.dataArray.map(function (row) {
            var rowData = row.join(separator);
            if (rowData.length && addQuotes) {
                return '"' + rowData + '"';
            }
            return rowData
        });
        var type = 'data:text/csv;charset=utf-8';
        var data = rows.join('\n');
        if (typeof btoa === 'function') {
            type += ';base64';
            data = btoa(data);
        } else {
            data = encodeURIComponent(data);
        }
        return this.downloadLink = this.downloadLink || type + ',' + data;
    };
    this.getLinkElement = function (linkText) {
        var downloadLink = this.getDownloadLink();
        return this.linkElement = this.linkElement || $('<a>' + (linkText || '') + '</a>', {
            href: downloadLink,
            download: this.fileName
        });
    };
    // call with removeAfterDownload = true if you want the link to be removed after downloading
    this.download = function (removeAfterDownload) {
        this.getLinkElement().css('display', 'none').appendTo('body');
        this.getLinkElement()[0].click();
        if (removeAfterDownload) {
            this.getLinkElement().remove();
        }
    };
}
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers