3

I found this on how to export a single table into an excel file using javascript, and it works perfectly for one table:

HTML Table to Excel Javascript

However, I have multiple tables that I want to export into a single CSV file. How could I go about modifying that code to accomplish this?

I tried changing "getElementById" to "getElementByClass", and added the same class name for these tables, but the excel output just said "undefined"

Here is the code I tried

<script type="text/javascript">
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, filename) {
        if (!table.nodeType) table = document.getElementByClass(table)
        var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }

        document.getElementById("dlink").href = uri + base64(format(template, ctx));
        document.getElementById("dlink").download = filename;
        document.getElementById("dlink").click();

    }
})()</script>

<a id="dlink"  style="display:none;"></a>

<input type="button" onclick="tableToExcel('alltables', 'alltables', 'myfile.xls')"     value="Export to Excel">

print "<table id='vmax' class='alltables'>";
print "<caption>VMAX - 3720</caption>";
print "<tr>";
print "<th>Date</th>";
print "<th>Type</th>";
print "<th>Serial</th>";
print "<th>Total Size</th>";
print "<th>Used</th>";
print "<th>Free</th>";
print "<th>Use %</th>";
print "</tr>";

while($row = sqlsrv_fetch_array($stmt))
{
print "<tr>";
$date = $row[0];
$result = $date->format('Y-m-d');
print "<td>" . $result . "</td>";
for($i=1; $i<6; $i++)
{
    print "<td>" . $row[$i] . "</td>";

}
print "<td>" . $row[6]*100 . "%</td>";
print "</tr>";
}

print "</table>";

print "<table id='datadomain' class='alltables'>";
print "<caption>DataDomain - Enterprise Vault</caption>";
print "<tr>";
print "<th>Date</th>";
print "<th>Type</th>";
print "<th>Location</th>";
print "<th>CTWDD</th>";
print "<th>CSC</th>";
print "<th>Total Size</th>";
print "<th>Used</th>";
print "<th>Free</th>";
print "<th>Use %</th>";
print "</tr>";

while($row = sqlsrv_fetch_array($stmt))
{
print "<tr>";
$date = $row[0];
$result = $date->format('Y-m-d');
print "<td>" . $result . "</td>";
for($i=1; $i<8; $i++)
{
    print "<td>" . $row[$i] . "</td>";

}
print "<td>" . $row[8]*100 . "%</td>";
print "</tr>";
}

print "</table>";

The code is within the proper php tags, I just left it out since there are many more tables.

Community
  • 1
  • 1
Emil
  • 1,131
  • 13
  • 23
  • I tried changing "getElementById" to "getElementByClass", and added the same class name for these tables, but the excel output just said "undefined" – Emil Feb 26 '14 at 16:24
  • Can you update your question with the code you're using/have written? – admdrew Feb 26 '14 at 16:25
  • I tried researching, but everything I found was only for a single table. – Emil Feb 26 '14 at 16:26
  • 1
    Have you tried looping through all the tables, concatenating it into one string, and setting your `var ctx = { worksheet: name || 'Worksheet', table: concatenatedTableHtml}`? – audiochick Feb 26 '14 at 16:33
  • When calling `getElementById` as return you get the HTMLElement for that table, `getElementByClass` the return is an `HTMLCollection`. You can't just call `innerHTML` on that but need to iterate on its elements instead. – Prusse Feb 26 '14 at 16:33
  • audiochick, how do I go about looping through tables and concatenating into a single string? – Emil Feb 26 '14 at 16:36
  • With jquery `$.each('.alltables', function(index, table) { tableText += table.html()});` where tableText is the string you concatenate all the tables to. This should be initialised as an empty string before the loop is started. – audiochick Feb 26 '14 at 16:44
  • I edited the code to read `var tableText = "";` `$.each('.alltables', function(index, table) { tableText += table.html()});` `var ctx = { worksheet: name || 'Worksheet', table: tableText}` does that look right? – Emil Feb 26 '14 at 16:58
  • A csv file has a very different structure from an Excel file (or even an HTML table pretending to be an Excel file). You need to loop through all of the cells in each table and build up a **comma-separated** string where each "line" is delimited by a line-break. Then try passing that to the client using a similar data-URI trick. – Tim Williams Feb 26 '14 at 17:20

0 Answers0