Export From HTML Table Using jQuery

Sibeesh Venu

Introduction

In this article we will see how to export from an HTML table using jQuery. We all work in some applications where we are playing with data’s . It might be some data returned by the server or it might be some client side data like HTML table. No matter which ever form the data is, there will be an export option. Isn’t it? 80% of our clients need the data to be exported as excel. So we need to give the option to export the given data to excel, not dependent of the data format. In my case my data is in the form of an HTML table, so in this post we will explain how to export an html data to excel, pdf, png, jpeg etc. I hope you will like it.

Download source code here : HTML Table Export

See this article in my website : here

Background

This article explains how to export a HTML table using jQuery. It covers exporting to the following formats:

Excel
PDF
Image
CSV
PPT
Word
TXT
XML

Why

In my project, we are doing 80% of our work in the client side. So I decided to implement the export feature in the client side itself. The same can be done using server-side code also but I prefer the client-side one.

What you must know

Using the code

Before you start, you need to download the necessary files from: TableExport.jquery.plugin.

Once you have download the files, you need to include those in your project. Here I am using a MVC4 web application.

<script src="~/Contents/jquery-1.9.1.js"></script>
<script src="~/Contents/tableExport.js"></script> @*Main file which does export feature *@
<script src="~/Contents/jquery.base64.js"></script> @*Main file which does convert the content to base64 *@
<script src="~/Contents/html2canvas.js"></script> @*Main file which does export to image feature *@
<script src="~/Contents/jspdf/libs/base64.js"></script> @*Main file which does convert the content to base64 for pdf *@
<script src="~/Contents/jspdf/libs/sprintf.js"></script> @*Main file which does export feature for pdf *@
<script src="~/Contents/jspdf/jspdf.js"></script> @*Main file which does export feature for pdf *@

Let's say you have an HTML table as follows:

<table id="activity" >
<thead>
<tr>
<th>Name</th>
<th>Activity on Code Project (%)</th>
<th>Activity on C# Corner (%)</th>
<th>Activity on Asp Forum (%)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sibeesh</td>
<td>100</td>
<td>98</td>
<td>80</td>
</tr>
<tr>
<td>Ajay</td>
<td>90</td>
<td>0</td>
<td>50</td>
</tr>
<tr>
<td>Ansary</td>
<td>100</td>
<td>20</td>
<td>10</td>
</tr>
<tr>
<td>Aghil</td>
<td>0</td>
<td>30</td>
<td>90</td>
</tr>
<tr>
<td>Arya</td>
<td>0</td>
<td>0</td>
<td>95</td>
</tr>
</tbody>
</table>

Add some more UI elements for firing the click events.

<table>
<tr id="footerExport">
<td id="exportexcel"><img src="~/icons/xls.png" title="Export to Excel" /></td>
<td id="exportpdf"><img src="~/icons/pdf.png" title="Export to PDF" /></td>
<td id="exportimage"><img src="~/icons/png.png" title="Export to PNG" /></td>
<td id="exportcsv"><img src="~/icons/csv.png" title="Export to CSV" /></td>
<td id="exportword"><img src="~/icons/word.png" title="Export to Word" /></td>
<td id="exporttxt"><img src="~/icons/txt.png" title="Export to TXT" /></td>
<td id="exportxml"><img src="~/icons/xml.png" title="Export to XML" /></td>
<td id="exportppt"><img src="~/icons/ppt.png" title="Export to PPT" /></td>
</tr>
</table>

Add a few styles to the table to make it viewable.

<style>
#activity {
text-align:center;border:1px solid #ccc;
}
#activity td{
text-align:center;border:1px solid #ccc;
}
#footerExport td{
cursor:pointer;
text-align:center;border:1px solid #ccc;
border:none;
}
</style>

Now it is time to fire our events :) You can do that as in the following.

<script>
$(document).ready(function () {
$('#exportexcel').bind('click', function (e) {
$('#activity').tableExport({ type: 'excel', escape: 'false' });
});
$('#exportpdf').bind('click', function (e) {
$('#activity').tableExport({ type: 'pdf', escape: 'false' });
});
$('#exportimage').bind('click', function (e) {
$('#activity').tableExport({ type: 'png', escape: 'false' });
});
$('#exportcsv').bind('click', function (e) {
$('#activity').tableExport({ type: 'csv', escape: 'false' });
});
$('#exportppt').bind('click', function (e) {
$('#activity').tableExport({ type: 'powerpoint', escape: 'false' });
});
$('#exportxml').bind('click', function (e) {
$('#activity').tableExport({ type: 'xml', escape: 'false' });
});
$('#exportword').bind('click', function (e) {
$('#activity').tableExport({ type: 'doc', escape: 'false' });
});
$('#exporttxt').bind('click', function (e) {
$('#activity').tableExport({ type: 'txt', escape: 'false' });
});
});
</script>

Please note that you can export to a few more formats in the same way. You can learn more here: tableExport.jquery.plugin.

Explanation

Now its time go deeper into that plugin. In the downloaded files you can see a file called tableExport.js. just open that file, you can see some conditions for specific formats. And the default property for exporting as follows.

var defaults = {
separator: ',',
ignoreColumn: [],
tableName:'yourTableName',
type:'csv',
pdfFontSize:7,
pdfLeftMargin:20,
escape:'true',
htmlContent:'false',
consoleLog:'false'
};

You can change these properties depending on your needs as follows.

var varpdfFontSize= '7';
$('#activity').tableExport({ type: 'excel', escape: 'false',pdfFontSize:varpdfFontSize});

You can try all the properties listed above like this :).

Now in that file you can see an if else if condition that is satisfied for multiple formats. Let me explain for Excel formatting alone.

var excel="<table>";
// Header
$(el).find('thead').find('tr').each(function() {
excel += "<tr>";
$(this).filter(':visible').find('th').each(function(index,data) {
if ($(this).css('display') != 'none'){
if(defaults.ignoreColumn.indexOf(index) == -1){
excel += "<td>" + parseString($(this))+ "</td>";
}
}
});
excel += '</tr>';
});
// Row Vs Column
var rowCount=1;
$(el).find('tbody').find('tr').each(function() {
excel += "<tr>";
var colCount=0;
$(this).filter(':visible').find('td').each(function(index,data) {
if ($(this).css('display') != 'none'){
if(defaults.ignoreColumn.indexOf(index) == -1){
excel += "<td>"+parseString($(this))+"</td>";
}
}
colCount++;
});
rowCount++;
excel += '</tr>';
});
excel += '</table>'
if(defaults.consoleLog == 'true'){
console.log(excel);
}
var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:"+defaults.type+"' xmlns='http://www.w3.org/TR/REC-html40'>";
excelFile += "<head>";
excelFile += "<!--[if gte mso 9]>";
excelFile += "<xml>";
excelFile += "<x:ExcelWorkbook>";
excelFile += "<x:ExcelWorksheets>";
excelFile += "<x:ExcelWorksheet>";
excelFile += "<x:Name>";
excelFile += "{worksheet}";
excelFile += "</x:Name>";
excelFile += "<x:WorksheetOptions>";
excelFile += "<x:DisplayGridlines/>";
excelFile += "</x:WorksheetOptions>";
excelFile += "</x:ExcelWorksheet>";
excelFile += "</x:ExcelWorksheets>";
excelFile += "</x:ExcelWorkbook>";
excelFile += "</xml>";
excelFile += "<![endif]-->";
excelFile += "</head>";
excelFile += "<body>";
excelFile += excel;
excelFile += "</body>";
excelFile += "</html>";
var base64data = "base64," + $.base64.encode(excelFile);
window.open('data:application/vnd.ms-'+defaults.type+';filename=exportData.doc;' + base64data);

Procedure

Find the UI element (in this case it is our HTML table).
Loop through the rows of the thread for the header information.
Apply a filter to avoid the UI elements that has a display as none (filter(':visible')).
If the UI is visible, append it to the variable (excel += "<td>" + parseString($(this))+ "</td>";)

The same procedure is done for the row vs column values also. The only difference is, here we are looping through the tbody instead of thread.
After the data is manipulated, data is formulated in the Excel format.

You can learn more in the attachment.

Output

Points of Interest

JQuesry, CSS, HTML, Export

History

1^st version: 18-11-2014
2nd Version : 24-11-2014

Changes done

Added Images to UI elements
Added some export feature

Please be noted that I have taken the images from plugin author's website (http://ngiriraj.com/pages/htmltable_export/demo.php) . You can find out more from that website.

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.
Kindest Regards
Sibeesh Venu

jQueryExport ExcelExport PDFExport WordExport From HTML TableExport HTMLExport PPTJQuery Export

52 Comments

Join the conversation! Your thoughts help the community grow.

Irma Carballo9y ago
Hi! It worked like a charm; however, I'm using jQuery DataTables and I have pagination on my result, Table export is only exporting the first page out of 10 from the actual result, is there a way to export the entire list and not just page 1? Thank you!
Sibeesh Venu9y ago
D Donthu Hi, Can you please share what error you are getting and also please check your browser console too.
- D Donthu9y ago
  1)var style = window.getComputedStyle(element, type)Object doesn't support property or method 'getComputedStyle' 2)SCRIPT438: Object doesn't support property or method 'indexOf'
- D Donthu9y ago
  Hi Sibeesh i am using IE 11 version and i include the all js file in solution
- Sibeesh Venu9y ago
  May I please know which version of IE you are using, most commonly this error occurs in IE version below 9.
D Donthu9y ago
I am got some error in above code
Sibeesh Venu10y ago
Sinraj V Thanks
Sibeesh Venu10y ago
Prasanna Murali Thanks
Sinraj V10y ago
Thanks to share
Prasanna Murali10y ago
Nice one...
Sibeesh Venu10y ago
Aqib Shehzad Thanks
Muhammad Aqib Shehzad10y ago
Very nice share
Sibeesh Venu10y ago
Upendra Pratap Shahi Thanks
Sibeesh Venu10y ago
kalu singh rao Thanks
Sibeesh Venu10y ago
Sr Karthiga Thank you
Sibeesh Venu10y ago
Victor Ruiz Can you please translate to English?
Sibeesh Venu10y ago
Vivek Kumar Thank you
Upendra Pratap Shahi10y ago
Nice one sir...
kalu singh rao10y ago
Nice...
Sr Karthiga10y ago
good one
Sr Karthiga10y ago
Nice explanation
Victor Ruiz10y ago
se puede exportar a pdf con un estilo css?
Vivek Kumar10y ago
Nice article
Sibeesh Venu11y ago
Harshad Pansuriya Thank you
Harshad Pansuriya11y ago
Nice one
Ashok Keshri11y ago
csv file not open in csv format
Rupali Shinde11y ago
same q, is there way to generate chart from data for excel ??
Mary Slocum11y ago
Is there any way to generate a chart from data for Excel using jQuery? Basically, I would like the data in a table in Excel along with a chart using the data beside it.
ishwar11y ago
How change file to be downloaed.by default it Show "Download"
Sibeesh Venu12y ago
vinoth kumar Hi , Have you checked the css style of those columns?
vinoth kumar12y ago
hi i have 10 columns but in my pdf only 4 columns is visible..
Sibeesh Venu12y ago
poorna gowri Hi I have not faced that issue yet. Can you please open that in excel and verify whether it is there also?
Sibeesh Venu12y ago
poorna gowri Hi , Have you checked the css style of those columns? Please verify whether its display is none or not.
poorna gowri12y ago
If I open this files in notepad or wordpad it showing %2C displayed instead of comma and %u20B9 displayed for rupees symbol and %20 for space. My output is collapsed. I think its regarding encoding. How to solve this?
poorna gowri12y ago
I tried that. working awesome. But when exporting as pdf only 4 columns are displayed. My table has 6 columns. I want to retrieve all columns. Can Anyone help pls?
Sibeesh Venu12y ago
vamsi pandu Actually this approach is for generating pdf from a HTML table , as in the title. Is your image inside that HTML table?
- vamsi pandu12y ago
  yes i have images in html table.even the functionality i snot working in ie.
vamsi pandu12y ago
in your approach images are nt exporting to pdf,can you explain how to get images also in pdf file
Sibeesh Venu12y ago
Sumit Jolly I will do it as you said. Once again thank you so much.
Sibeesh Venu12y ago
Sumit Jolly Thanks a lot for your valuable suggestion.
Guest User12y ago
And, you can save it as say 1.xls file and open in Excel. So, Excel will shout for bad file but it'll open eventually.
Guest User12y ago
For ex- <html><body> <table> <th>1</th> <th>2</th> <tr><td>12</td> <td>22</td></tr> </table> </body> </html>
Guest User12y ago
This is good Sibeesh Venu! I applied "a-hack" long time back before OpenXML rose to popularity index, i.e., to export data as html and keep extension as ".xls". Now. dont use this because its a hack.
Sibeesh Venu12y ago
gopichand n Will look on it.
gopichand n12y ago
ngiriraj.com is working fine but borders and styles what i applied is not working when i download pdf....please help me ...i have a question posted for this in asp forums please look it once.. http://forums.asp.net/t/2022373.aspx?How+to+Export+HTML+Table+to+PNG+JPEG+BMP+or+PDF
Sibeesh Venu12y ago
Mukesh Kumar Tiwari Thank you :)
Mukesh Kumar Tiwari12y ago
very nice..
Sibeesh Venu12y ago
Manish Kumar Choudhary Thank you :)
Sibeesh Venu12y ago
Joginder Banger Thank you :) . You can call me sibi :)
Manish Kumar Choudhary12y ago
Gud once Sibi..
Joginder Banger12y ago
Gud job..sir