<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 xKeyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |