Created
April 22, 2014 15:08
-
-
Save emamut/11182919 to your computer and use it in GitHub Desktop.
Stackoverflow answer: Export to CSV using jQuery and html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
a.export, a.export:visited { | |
text-decoration: none; | |
color:#000; | |
background-color:#ddd; | |
border: 1px solid #ccc; | |
padding:8px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<a href="http://stackoverflow.com/questions/16078544/export-to-csv-using-jquery-and-html" target="_blank">Export to CSV using jQuery and html</a> | |
<hr> | |
<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/> | |
<a href="#" class="export">Export Table data into Excel</a> | |
<br/> | |
<br/> | |
<!-- Notes below --> | |
<hr> | |
<p>Notes</p> | |
<ul> | |
<li style="font-weight:bold;">You can style your link to look like a button. I'll leave this effort to you</li> | |
<li>For issues and support in IE, see this: <a href="http://stackoverflow.com/questions/7405345/data-uri-scheme-and-internet-explorer-9-errors">http://stackoverflow.com/questions/7405345/data-uri-scheme-and-internet-explorer-9-errors</a> | |
</li> | |
<li>About the "download" attribute, see this: <a href="http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download" target="_blank">http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download</a>. In case you need to detect, see this: <a href="http://stackoverflow.com/questions/12112844/how-to-detect-support-for-the-html5-download-attribute" target="_blank">http://stackoverflow.com/questions/12112844/how-to-detect-support-for-the-html5-download-attribute</a> and this <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=676619" target="_blank">https://bugzilla.mozilla.org/show_bug.cgi?id=676619</a> | |
</li> | |
<li>Safari does not seem to have implemented the download attribute yet, but renaming the downloaded file and opening it confirms the CSV file is intact</li> | |
</ul> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function () { | |
function exportTableToCSV($table, filename) { | |
var $rows = $table.find('tr:has(td)'), | |
// Temporary delimiter characters unlikely to be typed by keyboard | |
// This is to avoid accidentally splitting the actual contents | |
tmpColDelim = String.fromCharCode(11), // vertical tab character | |
tmpRowDelim = String.fromCharCode(0), // null character | |
// actual delimiter characters for CSV format | |
colDelim = '","', | |
rowDelim = '"\r\n"', | |
// Grab text from table into CSV formatted string | |
csv = '"' + $rows.map(function (i, row) { | |
var $row = $(row), | |
$cols = $row.find('td'); | |
return $cols.map(function (j, col) { | |
var $col = $(col), | |
text = $col.text(); | |
return text.replace('"', '""'); // escape double quotes | |
}).get().join(tmpColDelim); | |
}).get().join(tmpRowDelim) | |
.split(tmpRowDelim).join(rowDelim) | |
.split(tmpColDelim).join(colDelim) + '"', | |
// Data URI | |
csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv); | |
$(this) | |
.attr({ | |
'download': filename, | |
'href': csvData, | |
'target': '_blank' | |
}); | |
} | |
// This must be a hyperlink | |
$(".export").on('click', function (event) { | |
// CSV | |
exportTableToCSV.apply(this, [$('#dvData>table'), 'export.csv']); | |
// IF CSV, don't do event.preventDefault() or return false | |
// We actually need this to be a typical hyperlink | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment