Convert table html to Excel in javascript

javascript jquery html mysql excel

16,401

Solution 1

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))
    }
})()

Solution 2

here is article Export html table to excel using javascript

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

Solution 3

<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'];
?>

16,401

Author by

Xavi Gómez Canals

Interesado en varios campos de la tecnología

Updated on June 15, 2022

Comments

Xavi Gómez Canals almost 2 years

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!

anonman about 10 years

I could actually use this myself
Xavi Gómez Canals about 10 years

Waw! Thank´s!! ...I see that there are variable tableToExcel, but...but how do I implement?.
Xavi Gómez Canals about 10 years

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 about 10 years

@xavi : use the code below: <script>tableToExcel();</script> after the code above. It will redirect to a download
Xavi Gómez Canals about 10 years

Yeahhh!! i´m very thank you for response! ....finaly, i decide to implement a PHPExcel library, but i try your solution!! Again, muchas gracias!
Xavi Gómez Canals almost 10 years

Thanks you very much!
SearchForKnowledge over 9 years

What if I wanted to display the compiled HTML tag?