export Html table to excel using javascript/jquery

Question

recently i made a website that has the ability to export the data of a table to an excel file. I am using the plugin table2excel for this which works fine on Chrome but doesn't work on IE, safari, firefox or any other browser for that matter. was wondering if i am doing something wrong here and if there is any other plugin or way to do this:

(note: i am using laravels templating engine called blade to include the table2excel plugin) html:

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title></title>

    <!-- CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
    {{ HTML::style('css/style.css') }}
    <!-- Javascript -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    {{ HTML::script('js/jquery.table2excel.js') }} 
    {{ HTML::script('js/script.js') }} 

</head>

            <table id="signedinTable" class="peopleTable table table-hover">
                <thead>
                    <tr>
                        <th>Voornaam</th>
                        <th>Achternaam</th>
                        <th>Telefoon nr.</th>
                        <th>E-mail</th>
                        <th>Bedrijf</th>
                        <th>Partner?</th>
                    </tr>
                </thead>

                <tbody>
                    @foreach($results as $result)

                    @if($result->isGoing == 1)

                        <tr class="signedinRow">
                            <td>{{ $result->firstname }}</td>
                            <td>{{ $result->lastname }}</td>
                            <td>{{ $result->phone }}</td>
                            <td>{{ $result->email }}</td>
                            <td>{{ $result->company }}</td>
                            <td class="signedinPartner">{{ $result->partner }}</td>
                        </tr>

                    @endif

                    @endforeach
                </tbody>
            </table>

        </div>
        <button id="signedinExport" class="excl btn btn-primary">Download als excel bestand</button>

jquery:

$("#signedinExport").click(function(){
    $("#signedinTable").table2excel({
        exclude:".noExl",
        name:"Aangemelde mensen",
        filename:"Aangemelde mensen"
    });
});

i am not getting any errors from ie, firefox or safari, also note that i'm not asking for people to write any code for me whatsoever, just a push in the right direction would be awesome!

please! every bit of help is VERY much appreciated!

"i really need to get this done ASAP", well it sounds like you need to write some code then. Posting a "give me teh codez" style question isn't the right way to go about solving this problem. Also it's far too broad and should be closed as such. — zzzzBov, Feb 25 '16 at 15:10
From your question it sounds like you need to do some research. — Nathan K, Feb 25 '16 at 15:14
@zzzzBov never intended for people to write code for me tough.. just asked if there is anything wrong with my code or if there is another way to do this, and as you can see i posted the code that i wrote so that people might see something wrong with it which is exactly what this website is for? stop breaking my balls m8 — Simon Rook, Feb 25 '16 at 15:14
@NathanK i did research but just can't get it man, everything i tried turned out to work to only work for 1 or 2 browsers or not at all.. or it would export the table as something completely different.. i'm not asking for anyone to write code for me, just a push in the right direction is enough for me! — Simon Rook, Feb 25 '16 at 15:16
just checking... your jquery is wrapped in $(function(){ }), right? otherwise it might not actually load properly. can we see the contents of script.js? — roryok, Feb 25 '16 at 15:21
@roryok yes it is wrapped inside a $(document).ready(function(){ ... }); — Simon Rook, Feb 25 '16 at 15:23

score 1 · Answer 1 · edited May 23 '17 at 12:14

Not using the jQuery function, and a bit more code but you could give this a shot:

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

    for(j = 0 ; j < tab.rows.length ; j++) 
    {     
        tab_text=tab_text+tab.rows[j].innerHTML+"</tr>";
        //tab_text=tab_text+"</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, ""); // reomves 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,"Say Thanks to Sumit.xls");
    }  
    else                 //other browser not tested on IE 11
        sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  

    return (sa);
}

Just create a blank iframe:

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

Call this function on:

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

link to original post

Tried something similar already but i'll give it a shot, thanks ALOT for answering! — Simon Rook, Feb 25 '16 at 15:27
it exports the table with a "file" extension not excl, does this have something to do with the iframe not being placed correctly inside the html? where should i place the iframe? — Simon Rook, Feb 25 '16 at 15:32
Just a guess, maybe change the sa declaration to: sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text) + '.xls'); — Wijnand, Feb 25 '16 at 15:38
unfortunately that didn't solve the problem, document is still exported as a "file"extension, thanks for taking your time, really appreciate it! — Simon Rook, Feb 25 '16 at 15:53

score 0 · Answer 2 · answered Feb 25 '16 at 15:46

I recently had a similar issue and found (the majority of) the following code snippet:

function exportTableToCSV($table, filename, answer) {
  var $rows = $table.find('tr'),
    //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('th,td');
      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
  var IEwindow = window.open();
  IEwindow.document.write(csv);
  IEwindow.document.close();
  if (IEwindow.document.execCommand('SaveAs', false, filename + ".csv")) {
    saveAsAnswer = 'saved';
  } else {
    saveAsAnswer = 'not saved';
  }
  IEwindow.close();
}

Shame on me for not remembering where I found this and not giving credit where credit is due...

I don't use many plugins and therefore love that the above code only uses jQuery. I use the above code for Internet Explorer 11. For cross-browser support, you'll want to edit the Data URI section (do a quick SO or Google search for Data URIs).

I've created a jsfiddle to show you how it works.

thank you for taking your time! will definitly try this out! — Simon Rook, Feb 25 '16 at 15:50
@YounasBangash Do you have popups blocked by your browser? The code requires a new window to be opened. I've just tested it and it works for me. — jritchey, Jun 08 '16 at 20:01

export Html table to excel using javascript/jquery

2 Answers2