Export HTML Table to Excel with ID or class tags in the table header

Question

I have a table in HTML on my webpage, and when using JQuery to export it to Excel, it will not work if I have any id or class tags in the table header.

the JQuery i am using is

//wont work unless the table has no class or id
$("#btnExport").click(function (e) {
window.open('data:application/vnd.ms-excel,' + $("#tableForExcel").html());
e.preventDefault();
});

The table I am using is

<table id='SearchTable' class='table table-bordered table-striped table-hover table blue '>
<tr>
<th class='ReportManager'>Report Manager</th>
<th class='ReportDetail'>Report Detail</th>
<th class='Form'>Form</th>

</tr>
<tr>
<td class='ReportManager'></td>
<td class='ReportDetail'></td>
<td class='Form'></td>

</tr>
<tr>
<td class='ReportManager'></td>
<td class='ReportDetail'></td>
<td class='Form'></td>

</tr>
</table>

I would be grateful if you could help me \ show me how i should adjust my code to get this to export.

You are not technically using jQuery to do the export -- the window.open piece is just plain JavaScript. The data: protocol is handled by your browser and OS. The only thing jQuery is doing here is grabbing the table HTML. If the class names are causing issues, you could clone the table, remove the classes, and pass that along instead. — Cᴏʀʏ
– Cᴏʀʏ, Commented Sep 11, 2015 at 14:10
If i remove all the tags, using the javascript how would i be able to identify how to put them back after the export so that table still looks the same after export? — Simon Price
– Simon Price, Commented Sep 11, 2015 at 14:13
Well, Excel wasn't built to be an HTML/CSS parser. It knows nothing about your Bootstrap class names. IMHO, if you want "pretty" Excel output, this is not the way to do it. — Cᴏʀʏ
– Cᴏʀʏ, Commented Sep 11, 2015 at 14:15
i dont need pretty, i just need to export it to excel, but with the tags it just gives me the HTML in an excel cell, without any tags it exports fine — Simon Price
– Simon Price, Commented Sep 11, 2015 at 14:18
What happens if you use the proper double-quotations in your markup instead of single-quotes? Excel, like most Microsoft products, likely needs absolutely perfect markup, so the single-quotes could be throwing it off. (i.e. replace all ' with "). — Cᴏʀʏ
– Cᴏʀʏ, Commented Sep 11, 2015 at 14:25

Sapikelio · Accepted Answer · 2015-12-16 10:14:13Z

3

I've solved the problem this way:

$("#btnExport").click(function (e) {
    window.open('data:application/vnd.ms-excel,' +'<table>' +$("#SearchTable").html()+ '</table>');
    e.preventDefault();
});

I hope it helps you.

answered Dec 16, 2015 at 10:14

Sapikelio

2,6143 gold badges20 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Simon Price Over a year ago

The project has passes now, but will try this anyway and let you know as this will crop up again I am sure.

Sapikelio Over a year ago

I supposed so, but I've decided to post the answer because I've found any solution for this problem and I think it could be useful for another users. :)

Simon Price Over a year ago

it doesn't export it, it just throws the

data:application/vnd.ms-excel,<table><tbody><tr><th class="ReportManager">Report Manager</th><th class="ReportDetail">Report Detail</th><th class="Form">Form</th></tr><tr><td class="ReportManager">1</td><td class="ReportDetail">2</td><td class="Form">3</td></tr><tr><td class="ReportManager">4</td><td class="ReportDetail">5</td><td class="Form">6</td></tr></tbody></table>

into the address bar and that's it

Simon Price Over a year ago

to be fair that could be an environment issue here at my office, im forced to use IE now, will try it on chrome later

Collectives™ on Stack Overflow

Export HTML Table to Excel with ID or class tags in the table header

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related