Convert table html to Excel in javascript

Question

I have a problem to convert an HTML table to an Excel file. I use

window.open ('data: application / vnd.ms-excel,' + ...

in javascript to perform this conversion. The problem is that the Excel file generated only has a one cell with all the HTML code inside. I need a typical table with rows and columns in Excel.

Thanks in advance and greetings to the community. I am super newbie ... please be patient! ;)

JAVASCRIPT CODE:

function excelSeguimientos() {
window.open('data:application/vnd.ms-excel,' + $('#tablaSeguimientos').html());
e.preventDefault();
}

HTML CODE (TABLE):

<table width="1000" id="tablaSeguimientos">
        <tr bgcolor="#CCC">
          <td width="100">Fecha</td>
          <td width="700">Seguimiento</td>
          <td width="170">Producto</td>
          <td width="30">&nbsp;</td>
        </tr>
        <tr bgcolor="#FFFFFF">
          <td><?php                 
                $date = date_create($row_Recordset3['fecha']);
                echo date_format($date, 'd-m-Y');
                ?></td>
          <td><?php echo $row_Recordset3['descripcion']; ?></td>
          <td><?php echo $row_Recordset3['producto']; ?></td>
          <td><img src="borrar.png" width="14" height="14" class="clickable" onClick="eliminarSeguimiento(<?php echo $row_Recordset3['idSeguimiento']; ?>)" title="borrar"></td>
        </tr>
      </table>

Thanks for all!!

NOTE: Is it possible to remove automatic the column with the image? Because the table is autogenerated by a mysql query, and has many rows! Thanks!

Try this url [Convert Html Table to Excel using javscript][1] [1]: stackoverflow.com/questions/11050815/… — Sri
– Sri, Commented Apr 23, 2014 at 11:37

Gaurang s · Accepted Answer · 2014-04-23 11:42:06Z

2

here is article Export html table to excel using javascript

http://www.codeproject.com/Questions/433079/Export-html-table-to-excel-using-javascript

answered Apr 23, 2014 at 11:42

Gaurang s

8426 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Christopher Chiche · Accepted Answer · 2016-09-20 07:45:28Z

2

Should have done more research, Code is below:

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("tablaSeguimientos")
        var ctx = {worksheet: name || 'tablaSeguimientos', table: tablaSeguimientos.innerHTML}
        window.location.href = uri + base64(format(template, ctx))
    }
})()

edited Sep 20, 2016 at 7:45

Christopher Chiche

15.4k10 gold badges65 silver badges100 bronze badges

answered Apr 23, 2014 at 11:38

anonman

981 silver badge8 bronze badges

6 Comments

anonman Over a year ago

I could actually use this myself

Xavi Gómez Canals Over a year ago

Waw! Thank´s!! ...I see that there are variable tableToExcel, but...but how do I implement?.

Xavi Gómez Canals Over a year ago

Ok! ...i put this sentence after your code: window.open('data:application/vnd.ms-excel,' + tableToExcel); ...but not works :( ....I'm really lost? ....I do not understand your code, sorry

anonman Over a year ago

@xavi : use the code below: <script>tableToExcel();</script> after the code above. It will redirect to a download

Xavi Gómez Canals Over a year ago

Yeahhh!! i´m very thank you for response! ....finaly, i decide to implement a PHPExcel library, but i try your solution!! Again, muchas gracias!

|

Praveen Srinivasan · Accepted Answer · 2015-02-25 11:40:38Z

<script src="jquery.min.js"></script>
<table border="1" id="ReportTable" class="myClass">
    <tr bgcolor="#CCC">
      <td width="100">Fecha</td>
      <td width="700">Seguimiento</td>
      <td width="170">Producto</td>
      <td width="30">&nbsp;</td>
    </tr>
    <tr bgcolor="#FFFFFF">
      <td>
            <?php                 
            $date = date_create($row_Recordset3['fecha']);
            echo date_format($date, 'd-m-Y');
            ?>
      </td>
      <td><? php echo $row_Recordset3['descripcion']; ?></td>
      <td><? php echo $row_Recordset3['producto']; ?></td>
      <td><img src="borrar.png" width="14" height="14" class="clickable" onClick="eliminarSeguimiento(<?php echo $row_Recordset3['idSeguimiento']; ?>)" title="borrar"></td>
    </tr>
  </table>

  <input type="hidden" id="datatodisplay" name="datatodisplay">  
    <input type="submit" value="Export to Excel">

table_export.php

<?php
header('Content-Type: application/force-download');
header('Content-disposition: attachment; filename=export.xls');
header("Pragma: ");
header("Cache-Control: ");
echo $_REQUEST['datatodisplay'];
?>

Collectives™ on Stack Overflow

Convert table html to Excel in javascript

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related