-4

I want to download this html table in excel format on button click. Please don't use php and all. Use javscript/css. Please give the complete code and also paste the link of js files required for the same. 

<table id="tb1">
    <tr>
        <td>Product</td>
        <td>Price</td>
        <td>Available</td>
        <td>Count</td>
    </tr>
    <tr>
        <td>Bred</td>
        <td>1</td>
        <td>2</td>
         <td>3</td>
    </tr>
    <tr>
        <td>Butter</td>
        <td>4   </td>
        <td>5   </td>
        <td >6  </td>
    </tr>

WakeUpSid
  • 33
  • 6
  • 1
    A bit bossy aren't we. – Paran0a May 31 '16 at 06:40
  • here is a link to start with http://stackoverflow.com/questions/5524143/how-can-i-export-tables-to-excel-from-a-webpage it's always better to ask for support for an issue you've googled properly and didn't find. don't ask for end to end solution – Mina Jacob May 31 '16 at 06:45
  • If you have control over server-side scritpting and use php, look for [PHPExcel](https://phpexcel.codeplex.com/). – Louys Patrice Bessette May 31 '16 at 06:45
  • I think you should go to blogs or sites that provide "Free to Download" files you needed. We don't simply paste "complete code" here just because you asked for it. *May the force be with you* – rhavendc May 31 '16 at 06:56
  • I just wanted an proper example of how to download a html table to excel format. I googled it but the codes didn't worked for me. – WakeUpSid May 31 '16 at 06:57
  • Also most are the php solutions which I didn't wanted for this. – WakeUpSid May 31 '16 at 06:59

1 Answers1

3

There are ways on how you will achieve it, you just need to explore and study. Here are my suggestions. Please examine these and alter the codes to suit your need.

This method works with IE7+, Firefox, Chrome and Safari. Here's the javascript:

function ToExcelReport(){
    var tab_text="<table border='2px'><tr bgcolor='#FFFFFF'>";
    var textRange; var j=0;
    tab = document.getElementById('tb1'); //id of table

    for(j = 0 ; j < tab.rows.length ; j++){     
        tab_text=tab_text+tab.rows[j].innerHTML+"</tr>";
    }

    tab_text=tab_text+"</table>";
    tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
    tab_text= tab_text.replace(/<img[^>]*>/gi,""); //remove if u want images in your table
    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); //remove input params

    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE "); 

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)){
        //if Internet Explorer
        txtArea1.document.open("txt/html","replace");
        txtArea1.document.write(tab_text);
        txtArea1.document.close();
        txtArea1.focus(); 
        sa=txtArea1.document.execCommand("SaveAs",true,"Sample.xls");
    } else{
        //other browsers
        sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
    }

    return (sa);
}

Now create a blank iframe:

<iframe id="sample" style="display:none"></iframe>

Then create a button which triggers the exportation. (It depends on you)

<button id="btnExport" onclick="ToExcelReport();"> EXPORT </button>

And here's another method. Do it in jquery way. (Jquery DataTables Table Tools plugin) But the cons is it will not work properly if by chance you don't have flash.

$(document).ready( function () {
    $('#tb1').dataTable( {
        "sDom": 'T<"clear">lfrtip',
        "oTableTools": {
            "sSwfPath": "/swf/copy_cvs_xls_pdf.swf"
        }
    } );
} );

Lastly, the excellent way I know is to use server-side language (because sometimes client-side languages is a pain when it comes to situation like this). If you have time to think and change your view in life... Joke!... use PHPExcel :)

rhavendc
  • 985
  • 8
  • 21