title: Export Html Table to Excel with CSS
body: <p>I'm trying to export a HTML table to Excel by keeping table style. I have searched the web and found a few examples, but none of them work as expected. They have problems like CSS not working or headers not supported.</p>
  
  <p>This is the code I have, but the file gets downloaded without an XLS extension.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    $("#btnExport").click(function(e) {
      window.open('data:application/vnd.ms-excel,' + $('#dvData').html());
      e.preventDefault();
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="dvData"&gt;
    &lt;table&gt;
      &lt;tr&gt;
        &lt;th&gt;Column One&lt;/th&gt;
        &lt;th&gt;Column Two&lt;/th&gt;
        &lt;th&gt;Column Three&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;row1 Col1&lt;/td&gt;
        &lt;td&gt;row1 Col2&lt;/td&gt;
        &lt;td&gt;row1 Col3&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td style="background-color: #ff0000"&gt;row2 Col1&lt;/td&gt;
        &lt;td&gt;row2 Col2&lt;/td&gt;
        &lt;td&gt;row2 Col3&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;row3 Col1&lt;/td&gt;
        &lt;td&gt;row3 Col2&lt;/td&gt;
        &lt;td&gt;&lt;a href="http://www.jquery2dotnet.com/"&gt;http://www.jquery2dotnet.com/&lt;/a&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/lesson8/jWAJ7/" rel="nofollow noreferrer">https://jsfiddle.net/lesson8/jWAJ7/</a></p>
  
  <p>I used code from this link, but it didn't work: <a href="https://www.codeproject.com/Tips/755203/Export-HTML-table-to-Excel-With-CSS" rel="nofollow noreferrer">https://www.codeproject.com/Tips/755203/Export-HTML-table-to-Excel-With-CSS</a></p>
  
  <p>table2excel.js plugin also not working 
  <a href="https://www.jqueryscript.net/table/Export-Html-Table-To-Excel-Spreadsheet-using-jQuery-table2excel.html" rel="nofollow noreferrer">https://www.jqueryscript.net/table/Export-Html-Table-To-Excel-Spreadsheet-using-jQuery-table2excel.html</a></p>