Export From HTML Table Using jQuery
[toc]
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 whichever forms the data is, there will be an export option. Isn’t it? 80% of our clients need the data to be exported to excel. So we need to give the option to export the given data to excel, not dependent on 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 Files here: HTML Table Export
Background
As I said earlier, this article explains how to export an HTML table using jQuery. In this article we will see how we can export the given data to the following formats:
- Excel
- Image
- CSV
- PPT
- Word
- TXT
- XML
You can always see other exporting related articles here.
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.
[js]
<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 *@
[/js]
Letβs say you have an HTML table as follows:
[html]
<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>
[/html]
Add some more UI elements for firing the click events.
[html]
<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>
[/html]
Add a few styles to the table to make it viewable.
[css]
<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>
[/css]
Now it is time to fire our events π You can do that as in the following.
[js]
<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>
[/js]
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.
[js]
var defaults = {
separator: β,β,
ignoreColumn: [],
tableName:βyourTableNameβ,
type:βcsvβ,
pdfFontSize:7,
pdfLeftMargin:20,
escape:βtrueβ,
htmlContent:βfalseβ,
consoleLog:βfalseβ
};
[/js]
You can change these properties depending on your needs as follows.
[js]
var varpdfFontSize= β7β;
$(β#activityβ).tableExport({ type: βexcelβ, escape: βfalseβ,pdfFontSize:varpdfFontSize});
[/js]
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.
[js]
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);
[/js]
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 have a display as none (filter(β:visibleβ)).
- If the UI is visible, append it to the variable (excel += ββ + parseString($(this))+ ββ;)
- 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
jquery, CSS, HTML, Export
History
1st version: 18-11-2014
2nd Version: 24-11-2014
Changes did
- Added Images to UI elements
- Added some export feature
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