Click here to Skip to main content
15,867,568 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 253.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

 
QuestionHOW CAN TO OMIT OR EXCLUDE THE LAS COLUMN? Pin
bolitto9-Sep-21 7:25
bolitto9-Sep-21 7:25 
AnswerRe: HOW CAN TO OMIT OR EXCLUDE THE LAS COLUMN? Pin
Er. Puneet Goel11-Nov-21 0:31
professionalEr. Puneet Goel11-Nov-21 0:31 
AnswerRe: HOW CAN TO OMIT OR EXCLUDE THE LAS COLUMN? Pin
Er. Puneet Goel11-Nov-21 0:39
professionalEr. Puneet Goel11-Nov-21 0:39 
Questionexport div content to excel with html css effect Pin
Member 1171953416-Nov-17 19:45
Member 1171953416-Nov-17 19:45 
AnswerRe: export div content to excel with html css effect Pin
Er. Puneet Goel19-Nov-17 19:44
professionalEr. Puneet Goel19-Nov-17 19:44 
Questionthe color of the table rows wouldn't display in the excel Pin
Member 1296542324-Jan-17 1:37
Member 1296542324-Jan-17 1:37 
AnswerRe: the color of the table rows wouldn't display in the excel Pin
Er. Puneet Goel30-Jan-17 18:24
professionalEr. Puneet Goel30-Jan-17 18:24 
Questionnew Pin
Er. Puneet Goel8-Jun-16 3:49
professionalEr. Puneet Goel8-Jun-16 3:49 
C#
public ActionResult ExportData()
        {


            SurveyAppEntities1 objdemo = new SurveyAppEntities1();
            GridView gv1= new GridView();
            gv1.DataSource = objdemo.Questions.ToList();
            gv1.DataBind();
            Response.ClearContent();
            Response.Buffer = true;
            Response.AddHeader("content-disposition", "attachment; filename=Marklist.xls");
            Response.ContentType = "application/ms-excel";
            Response.Charset = "";
            StringWriter sw1 = new StringWriter();
            HtmlTextWriter htw1 = new HtmlTextWriter(sw1);
            gv1.RenderControl(htw1);
            Response.Output.Write(sw1.ToString());
            Response.Flush();
            Response.End();
}

Thanks & Regards
Puneet Goel
Save Paper >> Save Tree >> Save Humanity

AnswerRe: new Pin
Member 126653232-Aug-16 9:57
Member 126653232-Aug-16 9:57 
GeneralRe: new Pin
CyberSaint25-Aug-20 15:30
professionalCyberSaint25-Aug-20 15:30 
Questionthe sample doesn't work for me Pin
sdnd200017-May-16 2:06
sdnd200017-May-16 2:06 
AnswerRe: the sample doesn't work for me Pin
Er. Puneet Goel25-May-16 2:25
professionalEr. Puneet Goel25-May-16 2:25 
QuestionHow can I add more than one sheet per File? Pin
Yngrid Coello9-May-16 5:23
Yngrid Coello9-May-16 5:23 
QuestionHow can I collaborate with your project? Pin
Yngrid Coello6-May-16 4:27
Yngrid Coello6-May-16 4:27 
AnswerRe: How can I collaborate with your project? Pin
Er. Puneet Goel8-May-16 20:07
professionalEr. Puneet Goel8-May-16 20:07 
QuestionCharset Pin
Member 1229738230-Jan-16 9:38
Member 1229738230-Jan-16 9:38 
AnswerRe: Charset Pin
Er. Puneet Goel1-Feb-16 19:03
professionalEr. Puneet Goel1-Feb-16 19:03 
QuestionWorks for .xls, what about .xlsx ? Pin
Member 1079144112-Nov-15 21:09
Member 1079144112-Nov-15 21:09 
AnswerRe: Works for .xls, what about .xlsx ? Pin
Er. Puneet Goel1-Dec-15 20:25
professionalEr. Puneet Goel1-Dec-15 20:25 
GeneralRe: Works for .xls, what about .xlsx ? Pin
Member 107914416-Jan-16 21:06
Member 107914416-Jan-16 21:06 
GeneralRe: Works for .xls, what about .xlsx ? Pin
Er. Puneet Goel11-Jan-16 22:12
professionalEr. Puneet Goel11-Jan-16 22:12 
GeneralRe: Works for .xls, what about .xlsx ? Pin
merkancam3-Oct-18 23:52
merkancam3-Oct-18 23:52 
QuestionDoesn't work for IE8, any fix? Pin
Member 1190359117-Aug-15 23:09
Member 1190359117-Aug-15 23:09 
AnswerRe: Doesn't work for IE8, any fix? Pin
Er. Puneet Goel17-Aug-15 23:51
professionalEr. Puneet Goel17-Aug-15 23:51 
GeneralRe: Doesn't work for IE8, any fix? Pin
shijo288833-Feb-16 18:23
shijo288833-Feb-16 18:23 

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.