Skip to content

Instantly share code, notes, and snippets.

@kalebdf

kalebdf/LICENSE

Forked from adilapapaya/README
Last active January 30, 2024 11:17
Show Gist options
  • Save kalebdf/ee7a5e7f44416b2116c0 to your computer and use it in GitHub Desktop.
Save kalebdf/ee7a5e7f44416b2116c0 to your computer and use it in GitHub Desktop.
Download ZIP
Export Table Data to CSV using Javascript
Raw
README
Example code for exporting data in a table to a csv file.
- Added IE support & check (@kalebdf, 8/19/2015)
- Added MIT license (@kalebdf, 9/8/2017)
http://bl.ocks.org/kalebdf/ee7a5e7f44416b2116c0
Raw
index.html
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Adila Faruk">
<title>Exporting Data to a CSV File</title>
<style type="text/css">
body{
font-family: sans-serif;
font-weight:300;
padding-top:30px;
color:#666;
}
.container{
text-align:center;
}
a{ color:#1C2045; font-weight:350;}
table{
font-weight:300;
margin:0px auto;
border: 1px solid #1C2045;
padding:5px;
color:#666;
}
th,td{
border-bottom: 1px solid #dddddd;
text-align:center;
margin: 10px;
padding:0 10px;
}
hr{
border:0;
border-top: 1px solid #E7C254;
margin:20px auto;
width:50%;
}
.button{
background-color:#1C2045;
color:#E7C254;
padding:5px 20px;
max-width: 300px;
line-height:1.5em;
text-align:center;
margin:5px auto;
}
.button a{ color:#E7C254;}
.refs{ display:block; margin:auto; text-align:left; max-width:500px; }
.refs .label{ font-size:1.4em;}
.refs > ul{ margin-top:10px; line-height:1.5em;}
</style>
</head>
<body>
<div class='container'>
<div id="dvData">
<table>
<tr>
<th>Column One</th>
<th>Column Two</th>
<th>Column Three</th>
</tr>
<tr>
<td>Row 1 Col 1</td>
<td>Row 1 Col 2</td>
<td>Row 1 Col 3 </td>
</tr>
<tr>
<td>Row 2 Col 1</td>
<td>Row 2 Col 2</td>
<td>Row 2 Col 3</td>
</tr>
<tr>
<td>Row 3 Col 1</td>
<td>Row 3 Col 2</td>
<td>Row 3 Col 3</td>
</tr>
</table>
</div>
<br/>
<div class='button'>
<a href="#" id ="export" role='button'>Click On This Here Link To Export The Table Data into a CSV File
</a>
</div>
<hr/>
<div class='refs'>
<div class='label'>References</div>
<ul>
<li><a href="http://stackoverflow.com/questions/16078544/export-to-csv-using-jquery-and-html" target="_blank">Export to CSV using jQuery and HTML (Stack Overflow)</a>
</li>
<li>
<a href="http://adilapapaya.wordpress.com/2013/11/15/exporting-data-from-a-web-browser-to-a-csv-file-using-javascript/" target="_blank">adilapapaya.wordpress.com</a>
</li>
</ul>
</div>
<hr/>
</div>
<!-- Scripts ----------------------------------------------------------- -->
<script type='text/javascript' src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
<!-- If you want to use jquery 2+: https://code.jquery.com/jquery-2.1.0.min.js -->
<script type='text/javascript'>
$(document).ready(function () {
console.log("HELLO")
function exportTableToCSV($table, filename) {
var $headers = $table.find('tr:has(th)')
,$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
var csv = '"';
csv += formatRows($headers.map(grabRow));
csv += rowDelim;
csv += formatRows($rows.map(grabRow)) + '"';
// Data URI
var csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
// For IE (tested 10+)
if (window.navigator.msSaveOrOpenBlob) {
var blob = new Blob([decodeURIComponent(encodeURI(csv))], {
type: "text/csv;charset=utf-8;"
});
navigator.msSaveBlob(blob, filename);
} else {
$(this)
.attr({
'download': filename
,'href': csvData
//,'target' : '_blank' //if you want it to open in a new window
});
}
//------------------------------------------------------------
// Helper Functions
//------------------------------------------------------------
// Format the output so it has the appropriate delimiters
function formatRows(rows){
return rows.get().join(tmpRowDelim)
.split(tmpRowDelim).join(rowDelim)
.split(tmpColDelim).join(colDelim);
}
// Grab and format a row from the table
function grabRow(i,row){
var $row = $(row);
//for some reason $cols = $row.find('td') || $row.find('th') won't work...
var $cols = $row.find('td');
if(!$cols.length) $cols = $row.find('th');
return $cols.map(grabCol)
.get().join(tmpColDelim);
}
// Grab and format a column from the table
function grabCol(j,col){
var $col = $(col),
$text = $col.text();
return $text.replace('"', '""'); // escape double quotes
}
}
// This must be a hyperlink
$("#export").click(function (event) {
// var outputFile = 'export'
var outputFile = window.prompt("What do you want to name your output file (Note: This won't have any effect on Safari)") || 'export';
outputFile = outputFile.replace('.csv','') + '.csv'
// CSV
exportTableToCSV.apply(this, [$('#dvData > table'), outputFile]);
// IF CSV, don't do event.preventDefault() or return false
// We actually need this to be a typical hyperlink
});
});
</script>
</body>
</html>
Raw
LICENSE
MIT License
Copyright (c) 2015 Kaleb Fulgham
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
@shiraleeana
Copy link

This is great, thank you!

@SachinCR1001
Copy link

Hey the above code for converting to csv is good. Its working fine for hundreds of rows.But the problem is if i have thousands of rows in table then i am not able to get the csv file. The downloaded csv file is throwing an error as network failed.

One more if i want to get csv file based on row search filtering its not able to get only search rows, instead its downloading all the rows in table irrespective of searched rows.
Hope i will get an reply asap. Advance thanks :-)

@helal-khan
Copy link

Thanks...:)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment