Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I export html table data as .csv file?

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?

like image 444
forrest Avatar asked Aug 23 '11 12:08

forrest


People also ask

How do I export data from a table to a CSV file?

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.


1 Answers

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']})"> 
like image 71
AlphaMale Avatar answered Oct 10 '22 05:10

AlphaMale