How do I export html table data as csv file

Question

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

User · Answer

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']})">

User · Answer

Thanks to gene tsai  here is some modifications to his code to run on my target page   csv      rows       data tr    for i  0 i  lt  rows length i          cells     rows i   find  td th        csv row           for  j 0 j lt cells length j              txt   cells j  innerText          csv row push txt replace       -               csv push csv row join          output   csv join   n     improvements    Use generic JavaScript for loop make sure each cell does not have a comma

User · Answer

You could use an extension for Chrome  that works well the times I have tried it   https   chrome google com webstore search html 20table 20to 20csv  category extensions  When installed and on any web page with a table if you click on this extension s icon it shows all the tables in the page  highlighting each as you roll over the tables it lists  clicking allows you to copy it to the clipboard or save it to a Google Doc    It works perfectly for what I need  which is occasional conversion  of web based tabular data into a spreadsheet I can work with

User · Answer

If it s an infrequent need  try one of several firefox addons which facilitate copying HTML table data to the clipboard  e g   https   addons mozilla org en-US firefox addon dafizilla-table2clipboard    For example  for the  table2clipboard  add-on    install the add-on in firefox open the web-page  with the table  in firefox right-click anywhere in the table and select  copy whole table  start up a spreadsheet application such as LibreOffice Calc paste into the spreadsheet  select appropriate separator character as needed  save export the spreadsheet as CSV

User · Answer

I ve briefly covered a simple way to do this with Google Spreadsheets  importHTML  and in Python  Pandas read html and to csv  as well as an example Python script in my SO answer here  https   stackoverflow com a 28083469 1588795

User · Answer

The following solution can do it    x000D   x000D    function     x000D       button   on  click   function     x000D      var data       x000D      var tableData       x000D      var rows      table tr    x000D      rows each function index  row    x000D        var rowData       x000D          row  find  th  td   each function index  column    x000D          rowData push column innerText   x000D            x000D        tableData push rowData join        x000D          x000D      data    tableData join   n    x000D        document body  append   lt a id  download-link  download  data csv  href     URL createObjectURL new Blob  data     x000D        type   text csv  x000D               gt     x000D   x000D   x000D          download-link   0  click    x000D          download-link   remove    x000D        x000D      x000D  table   x000D    border-collapse  collapse  x000D    x000D   x000D  td  x000D  th   x000D    border  1px solid  aaa  x000D    padding  0 5rem  x000D    text-align  left  x000D    x000D   x000D  td   x000D    font-size  0 875rem  x000D    x000D   x000D   btn-group   x000D    padding  1rem 0  x000D    x000D   x000D  button   x000D    background-color   fff  x000D    border  1px solid  000  x000D    margin-top  0 5rem  x000D    border-radius  3px  x000D    padding  0 5rem 1rem  x000D    font-size  1rem  x000D    x000D   x000D  button hover   x000D    cursor  pointer  x000D    background-color   000  x000D    color   fff  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   lt table gt  x000D     lt thead gt  x000D       lt tr gt  x000D         lt th gt Name lt  th gt  x000D         lt th gt Author lt  th gt  x000D         lt th gt Description lt  th gt  x000D       lt  tr gt  x000D     lt  thead gt  x000D     lt tbody gt  x000D       lt tr gt  x000D         lt td gt jQuery lt  td gt  x000D         lt td gt John Resig lt  td gt  x000D         lt td gt The Write Less  Do More  JavaScript Library  lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt React lt  td gt  x000D         lt td gt Jordan Walke lt  td gt  x000D         lt td gt React makes it painless to create interactive UIs  lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Vue js lt  td gt  x000D         lt td gt Yuxi You lt  td gt  x000D         lt td gt The Progressive JavaScript Framework  lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   lt div class  btn-group  gt  x000D     lt button gt csv lt  button gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Here is a really quick CoffeeScript jQuery example  csv      for row in     sometable tr     csv push       col innerText     for col in   row  find  td th    join      output   csv join   n

User · Answer

I was able to use the answer outlined here: Export to CSV using jQuery and html and added in a modification to make it work in IE and another modification mentioned in the comments to grab the thead from the table.

function exportTableToCSV($table, filename) {

    var $rows = $table.find('tr:has(td),tr:has(th)'),

        // 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,th');

            return $cols.map(function (j, col) {
                var $col = $(col), text = $col.text();

                return text.replace(/"/g, '""'); // 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);

        console.log(csv);

        if (window.navigator.msSaveBlob) { // IE 10+
            //alert('IE' + csv);
            window.navigator.msSaveOrOpenBlob(new Blob([csv], {type: "text/plain;charset=utf-8;"}), "csvname.csv")
        } 
        else {
            $(this).attr({ 'download': filename, 'href': csvData, 'target': '_blank' }); 
        }
}

// This must be a hyperlink
$("#xx").on('click', function (event) {

    exportTableToCSV.apply(this, [$('#projectSpreadsheet'), 'export.csv']);

    // IF CSV, don't do event.preventDefault() or return false
    // We actually need this to be a typical hyperlink
});

With my link looking like this...

<a href="#" id="xx" style="text-decoration:none;color:#000;background-color:#ddd;border:1px solid #ccc;padding:8px;">Export Table data into Excel</a>

JsFiddle: https://jsfiddle.net/mnsinger/65hqxygo/

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

The answer is

Examples related to html

Examples related to parsing

Examples related to csv

Examples related to export

Examples related to export-to-csv

Tags