I have a table of data in an html table on a website and need to know how to export that data as .csv file.
How would this be done?
Select the table of the database that you want to export and click on the Export tab from the right side. Select the CSV format from the Format drop-down list and click on the Go button. Select the Save File option and press the OK button.
For exporting html to csv try following this example. More details and examples are available at the author's website.
Create a html2csv.js file and put the following code in it.
jQuery.fn.table2CSV = function(options) { var options = jQuery.extend({ separator: ',', header: [], delivery: 'popup' // popup, value }, options); var csvData = []; var headerArr = []; var el = this; //header var numCols = options.header.length; var tmpRow = []; // construct header avalible array if (numCols > 0) { for (var i = 0; i < numCols; i++) { tmpRow[tmpRow.length] = formatData(options.header[i]); } } else { $(el).filter(':visible').find('th').each(function() { if ($(this).css('display') != 'none') tmpRow[tmpRow.length] = formatData($(this).html()); }); } row2CSV(tmpRow); // actual data $(el).find('tr').each(function() { var tmpRow = []; $(this).filter(':visible').find('td').each(function() { if ($(this).css('display') != 'none') tmpRow[tmpRow.length] = formatData($(this).html()); }); row2CSV(tmpRow); }); if (options.delivery == 'popup') { var mydata = csvData.join('\n'); return popup(mydata); } else { var mydata = csvData.join('\n'); return mydata; } function row2CSV(tmpRow) { var tmp = tmpRow.join('') // to remove any blank rows // alert(tmp); if (tmpRow.length > 0 && tmp != '') { var mystr = tmpRow.join(options.separator); csvData[csvData.length] = mystr; } } function formatData(input) { // replace " with “ var regexp = new RegExp(/["]/g); var output = input.replace(regexp, "“"); //HTML var regexp = new RegExp(/\<[^\<]+\>/g); var output = output.replace(regexp, ""); if (output == "") return ''; return '"' + output + '"'; } function popup(data) { var generator = window.open('', 'csv', 'height=400,width=600'); generator.document.write('<html><head><title>CSV</title>'); generator.document.write('</head><body >'); generator.document.write('<textArea cols=70 rows=15 wrap="off" >'); generator.document.write(data); generator.document.write('</textArea>'); generator.document.write('</body></html>'); generator.document.close(); return true; } };
include the js files into the html page like this:
<script type="text/javascript" src="jquery-1.3.2.js" ></script> <script type="text/javascript" src="html2CSV.js" ></script>
TABLE:
<table id="example1" border="1" style="background-color:#FFFFCC" width="0%" cellpadding="3" cellspacing="3"> <tr> <th>Title</th> <th>Name</th> <th>Phone</th> </tr> <tr> <td>Mr.</td> <td>John</td> <td>07868785831</td> </tr> <tr> <td>Miss</td> <td><i>Linda</i></td> <td>0141-2244-5566</td> </tr> <tr> <td>Master</td> <td>Jack</td> <td>0142-1212-1234</td> </tr> <tr> <td>Mr.</td> <td>Bush</td> <td>911-911-911</td> </tr> </table>
EXPORT BUTTON:
<input value="Export as CSV 2" type="button" onclick="$('#example1').table2CSV({header:['prefix','Employee Name','Contact']})">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With