Click here to Skip to main content
15,886,806 members
Articles / Web Development / HTML5
Tip/Trick

Export HTML table to Excel With CSS

Rate me:
Please Sign up or sign in to vote.
4.88/5 (19 votes)
5 Apr 2014CPOL 254.7K   9.8K   23   51
Here is a quick code for how you can export the HTML table to Excel with CSS of table.

Introduction

Many times, we have to export the HTML table in Excel file to offline view and more Excel editing work. This turns more tricky when we need the CSS of the table too. Here is the sample application demonstrating the Excel export.

Background

To start with this, you need a little knowledge of JavaScript.

Using the Code

Put the below code in your Head part of the page.

JavaScript

JavaScript
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <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) {
                if (!table.nodeType) table = document.getElementById(table)
                var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }
                window.location.href = uri + base64(format(template, ctx))
            }
        })()
    </script> 

In the above code, we are converting the table to the Excel Sheet standard.

Sample HTML Code

HTML
<input type="button" onclick="tableToExcel('testTable', 'W3C Example Table')" value="Export to Excel">
<table id="testTable" summary="Code page support in different versions of MS Windows."
    rules="groups" frame="hsides" border="2">
    <caption>
        CODE-PAGE SUPPORT IN MICROSOFT WINDOWS</caption>
    <colgroup align="center">
    </colgroup>
    <colgroup align="left">
    </colgroup>
    <colgroup span="2" align="center">
    </colgroup>
    <colgroup span="3" align="center">
    </colgroup>
    <thead valign="top">
        <tr>
            <th>Code-Page<br>ID</th>
            <th>Name</th>
            <th>ACP</th>
            <th>OEMCP</th>
            <th>Windows<br>NT 3.1</th>
            <th>Windows<br>NT 3.51</th>
            <th>Windows<br>95</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1200</td>
            <td style="background-color: #00f; color: #fff">Unicode (BMP of ISO/IEC-10646)</td>
            <td></td>
            <td></td>
            <td>X</td>
            <td>X</td>
            <td>*</td>
        </tr>
        <tr>
            <td>1250</td>
            <td style="font-weight: bold">
                <a href="http://www.jquery2dotnet.com/">http://www.jquery2dotnet.com/</a>
            </td>
            <td>X</td>
            <td></td>
            <td>X</td>
            <td>X</td>
            <td>X</td>
        </tr>
        <tr>
            <td>1255</td>
            <td>Hebrew</td>
            <td>X</td>
            <td></td>
            <td></td>
            <td></td>
            <td>X</td>
        </tr>
        <tr>
            <td>437</td>
            <td>MS-DOS United States</td>
            <td></td>
            <td>X</td>
            <td>X</td>
            <td>X</td>
            <td>X</td>
        </tr>
        <tr>
            <td>708</td>
            <td>Arabic (ASMO 708)</td>
            <td></td>
            <td>X</td>
            <td></td>
            <td></td>
            <td>X</td>
        </tr>
        <tr>
            <td>709</td>
            <td>Arabic (ASMO 449+, BCON V4)</td>
            <td></td>
            <td>X</td>
            <td></td>
            <td></td>
            <td>X</td>
        </tr>
        <tr>
            <td>710</td>
            <td>Arabic (Transparent Arabic)</td>
            <td></td>
            <td>X</td>
            <td></td>
            <td></td>
            <td>X</td>
        </tr>
    </tbody>
</table>

Points of Interest

The file is converted and saved as Excel on the client side without any postbacks that is also very quick.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer
India India
Puneet Goel is an IT Professional with 8+ years. He is specialized in Microsoft Technologies (Asp.NET, SQL Server, Ajax, Jquery, JavaScript, MVC, and Angular). He is an avid member of several development communities and a serial blogger.He loves to learn new technology, do experiments with existing ones, and always happy to help the community.

Comments and Discussions

 
QuestionCan I specify column width? Pin
Member 1139763623-Jan-15 5:00
Member 1139763623-Jan-15 5:00 
AnswerRe: Can I specify column width? Pin
Er. Puneet Goel8-Feb-15 23:05
professionalEr. Puneet Goel8-Feb-15 23:05 
QuestionNot working Pin
Bahru25-Nov-14 19:50
Bahru25-Nov-14 19:50 
AnswerRe: Not working Pin
Er. Puneet Goel8-Feb-15 22:18
professionalEr. Puneet Goel8-Feb-15 22:18 
QuestionHow to change the file name? Pin
Member 1123036813-Nov-14 0:45
Member 1123036813-Nov-14 0:45 
AnswerRe: How to change the file name? Pin
Er. Puneet Goel19-Nov-14 20:33
professionalEr. Puneet Goel19-Nov-14 20:33 
AnswerRe: How to change the file name? Pin
Yngrid Coello6-May-16 4:34
Yngrid Coello6-May-16 4:34 
Questionneed to add export to excel in my code Pin
Member 1101298714-Aug-14 4:46
Member 1101298714-Aug-14 4:46 
Hi,
i have below code :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>


a {
text-decoration: none;
}

a:hover {
color: #FF8000;
font-weight: bold;
text-decoration: none;
}

table {
margin: 0;
border-collapse: collapse;
color: #222;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
th {
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
color: #222;
font-weight: bold;
background-color: #F2F2F2;
border: 1px solid #cccccc;
margin: 0;
padding: 4px 10px 4px 5px;
text-align: left;
}

td {
color: #222;
font: 8pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
border: 1px solid #cccccc;
margin: 0;
/* padding: 6px 20px 1px 0; */
padding: 8px 20px 5px 5px;
}

td.userinput {
color: #222;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
font-weight: bold;
border-bottom: 0px;
margin: 0;
padding: 6px 20px 1px 0;
}

td.errormsg {
color: red;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
font-weight: bold;
border-bottom: 0px;
margin: 0;
padding: 6px 20px 1px 0;
}
td.msg {
color: #747170;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
font-weight: bold;
border-bottom: 0px;
margin: 0;
padding: 6px 20px 1px 0;
}

h3 {
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
background-color: #747170;
padding: 4px 4px 4px 4px;
color: white;
width: 100%;
}

</head>
<body>





")),
(if (exists Source ID of it)
then (Source ID of it as string)
else ("<none>")),
(if ((Name of it starts with "MS") AND (Name of it contains ":"))
then (preceding text of first ":" of (Name of it))
else ("NULL")),
(if (exists Source Severity of it)
then (Source Severity of it as string)
else ("<none>")),
(if (exists Name of it)
then (Name of it as string)
else ("<none>")))
of
bes fixlets
whose (
(display name of site of it = "Patches for Windows (English)") AND
(((Category of it as lowercase contains "critical updates") OR
(Category of it as lowercase contains "security update") OR
(Category of it as lowercase contains "definition updates") OR
(Category of it as lowercase contains "service pack") OR
(Category of it as lowercase contains "rollup")
OR
(Category of it as lowercase contains "update") OR
(Category of it as lowercase contains "security hotfix"))
OR
((Source Severity of it as lowercase contains "critical") OR
(Source Severity of it as lowercase contains "important") OR
(Source Severity of it as lowercase contains "moderate") OR
(Source Severity of it as lowercase contains "unspecified"))
AND
((Name of it as lowercase does not contain "sql")
OR
(Name of it as lowercase does not contain "office")
OR
(Name of it as lowercase does not contain "visual studio")
OR
(Name of it as lowercase does not contain "excel")
OR
(Name of it as lowercase does not contain "visio"))
AND
(Applicable Computer Count of it > 0)))
?>

Computer Name KB-ArticleBulletinSeverityUpdate Title



<script type="text/javascript">

addEvent(window, "load", init_load);

function init_load()
{
stripe('resultsTable', '#fff', '#E6E3E8');
// #E6E3E8, original edf3fe'
sortables_init();
}

var SORT_COLUMN_INDEX;
function sortables_init(){

// Find all tables with class sortable and make them sortable
if (!document.getElementsByTagName)
return;
tbls = document.getElementsByTagName("table");
for (ti = 0; ti < tbls.length; ti++) {
thisTbl = tbls[ti];
if (((' ' + thisTbl.className + ' ').indexOf("sortable") != -1) && (thisTbl.id)) {
//initTable(thisTbl.id);
ts_makeSortable(thisTbl);
}
}
}

function ts_makeSortable(table){
if (table.rows && table.rows.length > 0) {
var firstRow = table.rows[0];
}
if (!firstRow)
return;



function ts_getInnerText(el){
if (typeof el == "string")
return el;
if (typeof el == "undefined") {
return el
};
if (el.innerText)
return el.innerText; //Not needed but it is faster
var str = "";

var cs = el.childNodes;
var l = cs.length;
for (var i = 0; i < l; i++) {
switch (cs[i].nodeType) {
case 1: //ELEMENT_NODE
str += ts_getInnerText(cs[i]);
break;
case 3: //TEXT_NODE
str += cs[i].nodeValue;
break;
}
}
return str;
}

function ts_resortTable(lnk, clid){
// get the span
var span;
for (var ci = 0; ci < lnk.childNodes.length; ci++) {
if (lnk.childNodes[ci].tagName && lnk.childNodes[ci].tagName.toLowerCase() == 'span')
span = lnk.childNodes[ci];
}
var spantext = ts_getInnerText(span);
var td = lnk.parentNode;
var column = clid || td.cellIndex;
var table = getParent(td, 'TABLE');

// Work out a type for the column
if (table.rows.length <= 1)
return;
var itm = ts_getInnerText(table.rows[1].cells[column]);
sortfn = ts_sort_caseinsensitive;
if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d\d\d$/))
sortfn = ts_sort_date;
if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d$/))
sortfn = ts_sort_date;
if (itm.match(/^[ $]/))
sortfn = ts_sort_currency;
if (itm.match(/^[\d\.]+$/))
sortfn = ts_sort_numeric;
SORT_COLUMN_INDEX = column;
var firstRow = new Array();
var newRows = new Array();
for (i = 0; i < table.rows[0].length; i++) {
firstRow[i] = table.rows[0][i];
}
for (j = 1; j < table.rows.length; j++) {
newRows[j - 1] = table.rows[j];
}
newRows.sort(sortfn);
if (span.getAttribute("sortdir") == 'down') {
ARROW = ' ';
newRows.reverse();
span.setAttribute('sortdir', 'up');
}
else {
ARROW = ' ';
span.setAttribute('sortdir', 'down');
}

// We appendChild rows that already exist to the tbody, so it moves them rather than creating new ones
// don't do sortbottom rows
for (i = 0; i < newRows.length; i++) {
if (!newRows[i].className || (newRows[i].className && (newRows[i].className.indexOf('sortbottom') == -1))) {
table.tBodies[0].appendChild(newRows[i]);
if (i % 2 > 0)
newRows[i].className = 'wr_oddRow';
else
newRows[i].className = 'wr_evenRow';
}
}
// do sortbottom rows only
for (i = 0; i < newRows.length; i++) {
if (newRows[i].className && (newRows[i].className.indexOf('sortbottom') != -1))
table.tBodies[0].appendChild(newRows[i]);
}

// Delete any other arrows there may be showing
var allspans = document.getElementsByTagName("span");
for (var ci = 0; ci < allspans.length; ci++) {
if (allspans[ci].className == 'sortarrow') {
if (getParent(allspans[ci], "table") == getParent(lnk, "table")) { // in the same table as us?
allspans[ci].innerHTML = ' ';
}
}
}
// adds up/down arrow to the column header
span.innerHTML = ARROW;

// Make zebra stripes in table
stripe('resultsTable', '#fff', '#E6E3E8');
}

function getParent(el, pTagName){
if (el == null)
return null;
else
if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase()) // Gecko bug, supposed to be uppercase
return el;
else
return getParent(el.parentNode, pTagName);
}

function ts_sort_date(a, b){
// y2k notes: two digit years less than 50 are treated as 20XX, greater than 50 are treated as 19XX
aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
if (aa.length == 10) {
dt1 = aa.substr(6, 4) + aa.substr(3, 2) + aa.substr(0, 2);
}
else {
yr = aa.substr(6, 2);
if (parseInt(yr) < 50) {
yr = '20' + yr;
}
else {
yr = '19' + yr;
}
dt1 = yr + aa.substr(3, 2) + aa.substr(0, 2);
}
if (bb.length == 10) {
dt2 = bb.substr(6, 4) + bb.substr(3, 2) + bb.substr(0, 2);
}
else {
yr = bb.substr(6, 2);
if (parseInt(yr) < 50) {
yr = '20' + yr;
}
else {
yr = '19' + yr;
}
dt2 = yr + bb.substr(3, 2) + bb.substr(0, 2);
}

if (dt1 == dt2)
return 0;
if (dt1 < dt2)
return -1;
return 1;
}

function ts_sort_currency(a, b){
aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).replace(/[^0-9.]/g, '');
bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).replace(/[^0-9.]/g, '');
return parseFloat(aa) - parseFloat(bb);
}

function ts_sort_numeric(a, b){
aa = parseFloat(ts_getInnerText(a.cells[SORT_COLUMN_INDEX]));
if (isNaN(aa))
aa = 0;
bb = parseFloat(ts_getInnerText(b.cells[SORT_COLUMN_INDEX]));
if (isNaN(bb))
bb = 0;
return aa - bb;
}

function ts_sort_caseinsensitive(a, b){
aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).toLowerCase();
bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).toLowerCase();
if (aa == bb)
return 0;
if (aa < bb)
return -1;
return 1;
}

function ts_sort_default(a, b){
aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
if (aa == bb)
return 0;
if (aa < bb)
return -1;
return 1;
}

function addEvent(elm, evType, fn, useCapture)// addEvent and removeEvent
// cross-browser event handling for IE5+, NS6 and Mozilla
// By Scott Andrew
{
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);
return true;
}
else
if (elm.attachEvent) {
var r = elm.attachEvent("on" + evType, fn);
return r;
}
else {
alert("Handler could not be removed");
}
}

// this function is needed to work around
// a bug in IE related to element attributes
function hasClass(obj) {
var result = false;
if (obj.getAttributeNode("class") != null) {
result = obj.getAttributeNode("class").value;
}
return result;
}

function stripe(id) {

// the flag we'll use to keep track of
// whether the current row is odd or even
var even = false;

// if arguments are provided to specify the colours
// of the even & odd rows, then use the them;
// otherwise use the following defaults:
var evenColor = arguments[1] ? arguments[1] : "#fff";
var oddColor = arguments[2] ? arguments[2] : "#eee";

// obtain a reference to the desired table
// if no such table exists, abort
var table = document.getElementById(id);
if (! table) { return; }

// by definition, tables can have more than one tbody
// element, so we'll have to get the list of child
// s
var tbodies = table.getElementsByTagName("tbody");

// and iterate through them...
for (var h = 0; h < tbodies.length; h++) {

// find all the elements...
var trs = tbodies[h].getElementsByTagName("tr");

// ... and iterate through them
for (var i = 0; i < trs.length; i++) {

// get all the cells in this row...
var tds = trs[i].getElementsByTagName("td");

// and iterate through them...
for (var j = 0; j < tds.length; j++) {

var mytd = tds[j];

mytd.style.backgroundColor =
even ? evenColor : oddColor;

}
// flip from odd to even, or vice-versa
even = ! even;
}
}
}
</script>
</body>
</html>

-------------------
can you please let me know how can i add export to excel in this code... i have followed your steps but it simply not exporting any data to excel.
Could you please let me know where i need to chaneg the code ,Kindly advise.
AnswerRe: need to add export to excel in my code Pin
Er. Puneet Goel7-Sep-14 23:32
professionalEr. Puneet Goel7-Sep-14 23:32 
QuestionHi It is not working in IE 10 also Pin
nattuthurai28-May-14 18:38
nattuthurai28-May-14 18:38 
BugNot Working in IE11 Pin
smartsoftengr8-Apr-14 2:09
smartsoftengr8-Apr-14 2:09 
GeneralRe: Not Working in IE11 Pin
Er. Puneet Goel8-Apr-14 2:30
professionalEr. Puneet Goel8-Apr-14 2:30 
GeneralRe: Not Working in IE11 Pin
Bhanu Karumudi20-Jul-14 5:19
Bhanu Karumudi20-Jul-14 5:19 
GeneralRe: Not Working in IE11 Pin
Er. Puneet Goel7-Sep-14 23:33
professionalEr. Puneet Goel7-Sep-14 23:33 
GeneralRe: Not Working in IE11 Pin
AngelMillan27-Oct-15 3:58
AngelMillan27-Oct-15 3:58 
GeneralRe: Not Working in IE11 Pin
Member 129328473-Jan-17 7:28
Member 129328473-Jan-17 7:28 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.