Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Export table data to excel using jQuery

I'm using this code:

var tableToExcel = (function() {
  var uri = 'data:application/vnd.ms-excel;base64,'
    , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
    , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
    , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
  return function(table, name) {
    if (!table.nodeType) table = document.getElementById(table)
    var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
    window.location.href = uri + base64(format(template, ctx))
  }
})()

Here is my submit button:

<td><input type="button" onclick="tableToExcel('project_table', 'W3C Example Table')" value="Export to Excel"></td>

The problem I'm having is some of my inputs are dropdowns and inputs but they are hidden on the time of building the excel file. So when the excel files first builds you'll see all the data and within 2 seconds all the data that has the hidden drop downs and inputs behind them go blank and render the html.

Pic1:

Fields with inputs dissapear

Pic2:

hidden elements

I'm trying to use textExtraction but it's not working for me.

$('#project_table').tablesorter({
        textExtraction: myTextExtraction
    });

    //todo: try getting the dataTable to work...
    //  it might be way better, just not sure how it would handle
    //  adding unrelated rows on the fly (comments)
    //$('#project_table').dataTable();

var myTextExtraction = function(node)  
{
    var elem = $(node);
    var theVal = null;

    if (elem.hasClass('edit')) {
        elem.children().each(function() {
            if ($(this).css('display') != 'none') {
                if ($(this).is('span')) {
                    theVal = $(this).text();
                } else { //all other element types (input, select, etc)
                    theVal = $(this).val();
                }
            }
        });

    } else {
        theVal = elem.text();
    }

    //console.log(theVal);


    var c = node.childNodes.length;

    if (c == 1) {
        theVal = node.innerHTML.trim();
    } else if (c == 5) {
        theVal = node.childNodes[3].innerHTML.trim();
    }

    //console.log(theVal);
    return theVal;

} 

Can anyone lend a hand, thank you.

Also if anyone knows an IE8 fix, it seems to only work in chrome and FF.

like image 984
Head Way Avatar asked Nov 06 '13 22:11

Head Way


1 Answers

I recommand to use DataTables jQuery plugin which manage sort, search, ajax, export and more. See http://datatables.net

like image 69
Hugo Gresse Avatar answered Nov 09 '22 04:11

Hugo Gresse