How to Export Html Table to Excel with CSS

Download Source Code

To export your table data (or) a list into excel workbook, there are several options to export like, we can use Microsoft.Office.Interop library or something else. But in this tutorial i want to show you the simplest way to export the Html Table to Excel with Inline CSS applied using very few lines of code.

  • Here the Excel creates a file that contains the Html and XML tags which is also called as Html/XML Hybrid. When a WorkBook saved in the following format with Html and XML tags, it can go from Excel to the Browser and back form Browser to Excel again without loosing any information.

Step 1:  Create a simple html code as following. Here we can create ‘N’ number of WorkSheets in a WorkBook.

  • From the above code X:Name  in the X:ExcelWorkSheet is the name of the sheet in the Excel.
  • And we can specify the required options to the WorkSheet with in <x:WorksheetOptions>. Here are the few more <X:WorkSheetOptions>
    •   <x:Selected/>   

    • <x:DoNotDisplayGridlines/>   

    • <x:ProtectContents>False</x:ProtectContents>   

    • <x:ProtectObjects>False</x:ProtectObjects>   

    • <x:ProtectScenarios>False</x:ProtectScenarios>

  • And the If condition <!–[if gte mso 9]> is used to check whether you have Microsoft Office or not. It’s really necessary to check this.

Step 2: Create a Html table with inline Css in the <body>

 

Step 3: Add the following Script in the <head>.

  • function (table, name) { … } is the function which is accepting the two parameters,
    • one is the Id of the table.
    • other is the name of the X:ExcelWorkSheet. 
  • template: It is just a string which is constructed with Html/XML hybrid.
  • base64 = function(s) –> accepting the parameter of the format which is framed by using function format = function (s, c).
  • format = function (s, c) –> accepting two parameters,
    • One is the template with HTMl and XML tags.
    • Other is the ctx object which is framed with two properties { worksheet: ‘ ‘, table:’ ‘}

Step 4: Here is the total HTML page.

Output:

11 thoughts to “How to Export Html Table to Excel with CSS”

  1. Hi ADMIN847785456, Thank you. Now i am able to download the code. But this is code is not working in IE. Will it work if we use external css? I am trying to implement with external css in Internet Explorer.

    1. Hi Rupali Patil.
      Thanks for making this notice to me, I have updated the code which is working in IE as well as in Chrome.

  2. Any idea on how to export multiple html tables into an excel? Each table can be in separate sheets or in a single one. That would really help a lot, Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *