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:

35 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

  3. I am using this approach to export a html table (high volume) to excel. With few data it is working but when there are higher number of data it is simply opening a new tab.

    1. Hi Divya,

      Let me know if you are facing any issues. There would be no changes required if you have followed the article.

  4. your work is amazing
    I have filled table with my php styles that bring data from SQL tables but it gives me
    error while downloading Excel file
    ” the URL you entered is incorrect, please try again”

    could you please help me in that issue

    1. Thanks for supporting Amr Elkholy. Might be your php styles make the issue. Check with the relevant styles that suit for .XLS format

    1. Thank you Atul for your supporting us,

      Unfortunately it’s a No. Because .XLSX format is collection of XML files which is not possible from client-side, in order to get it you need to make it from server-side.

  5. Spot on with this write-up, I seriously believe this site needs a lot more attention.
    I’ll probably be returning to see more, thanks for the information!

  6. Hi, I am getting an error while opening the excel file that the “file format and extension doesn’t match” do you know what can i do to get rid of that error. Thank you

Leave a Reply

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