Export HTML table data to Excel

using JavaScript
In this article, we will learn about how to export data, available in
a HTML table on a web page, into an excel file.
Export data to excel is a basic need of almost every enterprise
web application. Being a web developer, I too strongly required
the same in various projects I had in my career. Every time, I saw
a server side solution like export data with the help of some
custom Export to Excel server side method to generate & dump
an excel file at some temporary location on the server & then
downloads it. The whole process runs every time a user exports
some data. This raises the following major concerns:
1. Unwanted consumption of disk space at the server by
creating these temporary files.
2. Unwanted Postback to generate the excel files.
To avoid these concerns, I decided to implement some client side
functionality to export data in my current project. And so as a
genuine developer, I read many articles, blogs & posts to find a
best way to implement it. I got some JavaScript libraries that
works fine in Chrome, Firefox but not working in IE as the later
doesnt support data URIs. You can find more info about IE Data
URI here. I almost tried a lot of solutions but didnt find a
satisfactory one.
After a completely failed operation, I gained up with one thing i.e.
how can this work? As per my understanding:
1. Load data on the screen using a lightest control i.e. an HTML
Table.
2. Export this loaded data to an excel file by transforming this
html table using with the help of some data URI supported
elements like an IFrame.

So, I started writing some code & came up with this solution. So
far, we have seen a lot of theoretical aspects, its code time now.
First of all, lets load some data on your Web page like this one:

The screen above shows two HTML tables (ids datatable &
dataTable1) loaded with some sample data, above which there is
an Export to Excel button which, on click, export these two tables
data into an excel file.
Lets see what written in the click event of this button:

The click event of export button is written in jQuery syntax to call

a method name fnExportHTML with three parameters:
1. Pipe separated table name including in exported data. One
table or multiple table data can be exported in this way.
2. Background color of header row of each table data.
3. File name of excel file.
The source of this function is discussed later in this article.

So, after review the ingredients, lets taste the curry:

The above image shows the data that is being exported into an
excel file from HTML tables without any Postback & this file will be
downloaded or saved directly to the client machine. Hence,
addressing the two major issues discussed above.
Lets dig into the detail how all this stuff works.

ExportHTML.aspx
Include the ExportHTML.js file in you web page which contains
fnExportHTML method:

As this plugin is written in core JavaScript so no other JavaScript

library or CSS file is required to implement it.

The HTML for two tables is as below:

Now lets investigate the fnExportHTML written in ExportHTML.js

file:

ExportHTML.js

Here above, we can see some validations default values are

applied to input parameters. These are simple validations & there
can be more complex scenarios which can be covered by
extending this function as per your requirement.
Next step is to collect data from all the supplied tables which
looks like:

Now the final step is to export this collected data into an excel file
and which is handled differently in case if the client (browser) is
IE.
As IE doesnt support data URIs directly, then to implement export
to excel functionality, I have used another element like iframe as
a way around. For this we add an iframe element to our page as
per the following screenshot:

The same iframe ID i.e. exportIF is referred in the ExportHTML.js

file inside the fnExportHTML function where we are going to
export the collected data from HTML tables:

Following things needs to be noticed:

1. window.navigator.userAgent: This property give
the value of user-agent header sent by your browser. For exMozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64;
Trident/6.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR
3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; InfoPath.3)

The values verifies whether the browser is IE (contains MSIE)

or not as in case of Chrome, this header value looks like:
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML,
like Gecko) Chrome/41.0.2272.118 Safari/537.36

2. document.execCommand: This method execCommand is

a wrapper function for the Exec method to enable scriptable
execution of some command constants like SaveAs constant.
This method executes a command on the current document.
3. Other Browsers: In case of browsers i.e. Chrome or Firefox,
other than IE, the else part executes which says that :
Here encodeURIComponent() function is used to encode the
data as a URI. And application/vnd.ms-excel is a HTTP MIME
type for Microsoft Office Excel document. To know more
about MS-Office MIME types, click here.

Conclusion:
The main benefit of this approach is that it saves the excel file on
the client machine directly without any post back.
However, it is limited to a fact that it can export only that data
which is available in HTML table on a webpage. So, in case of any
paginated table or a grid (which renders as an HTML table), this
approach cannot work.
But in case of a light weight HTML page, this approach is best to
use.
I hope this article is useful to you & helps you in handling a
scenario like this.
This is my very first article published on web. So, whether you like
it or not, let me know your valuable comments as if you dislike it,
I will learn something new which is still unknown to me else it will
act as a morale booster.

I dont fear of being wrong as I always ready to learn

new facts around.