使用 CSS 将 Html 表导出到 Excel答案

【问题标题】：Export Html Table to Excel with CSS使用 CSS 将 Html 表导出到 Excel
【发布时间】：2019-10-21 19:46:28
【问题描述】：

我正在尝试通过保持表格样式将 HTML 表格导出到 Excel。我在网上搜索并找到了一些示例，但没有一个按预期工作。他们有 CSS 不工作或不支持标头等问题。

这是我的代码，但下载的文件没有 XLS 扩展名。

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="dvData">
  <table>
    <tr>
      <th>Column One</th>
      <th>Column Two</th>
      <th>Column Three</th>
    </tr>
    <tr>
      <td>row1 Col1</td>
      <td>row1 Col2</td>
      <td>row1 Col3</td>
    </tr>
    <tr>
      <td style="background-color: #ff0000">row2 Col1</td>
      <td>row2 Col2</td>
      <td>row2 Col3</td>
    </tr>
    <tr>
      <td>row3 Col1</td>
      <td>row3 Col2</td>
      <td><a href="http://www.jquery2dotnet.com/">http://www.jquery2dotnet.com/</a>
      </td>
    </tr>
  </table>
</div>

https://jsfiddle.net/lesson8/jWAJ7/

我使用了此链接中的代码，但它不起作用：https://www.codeproject.com/Tips/755203/Export-HTML-table-to-Excel-With-CSS

table2excel.js 插件也不起作用 https://www.jqueryscript.net/table/Export-Html-Table-To-Excel-Spreadsheet-using-jQuery-table2excel.html

【问题讨论】：

标签： javascript jquery css excel html-table

【解决方案1】：

这是我使用的代码。它生成一个 Xls 并发出警告，但它可以工作并获取数据和 css。可能在您发布问题后将近 2 年，但我想为什么不呢。

<a href="#" id="tests" onClick="javascript:fnExcelReport();">Download</a><br><br>
    
<table id="myTable">
        <tr  style="background-color: black; color: white; font-size: 10px;">
            <th>Name</th>
            <th>Last name</th>
            <th>age</th>
        </tr>
        <tr>
            <td>Bob</td>
            <td>John</td>
            <td>21</td>
       
        </tr>
    
    </table>
    
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script>
        function fnExcelReport() {
            var tab_text = '<html xmlns:x="urn:schemas-microsoft-com:office:excel">';
            tab_text = tab_text + '<head><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>';
    
            tab_text = tab_text + '<x:Name>Test Sheet</x:Name>';
    
            tab_text = tab_text + '<x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions></x:ExcelWorksheet>';
            tab_text = tab_text + '</x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>';
    
            tab_text = tab_text + "<table>";
            tab_text = tab_text + $('#myTable').html();
            tab_text = tab_text + '</table></body></html>';
    
            var data_type = 'data:application/vnd.ms-excel';
    
            var ua = window.navigator.userAgent;
            var msie = ua.indexOf("MSIE ");
    
            if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
                if (window.navigator.msSaveBlob) {
                    var blob = new Blob([tab_text], {
                        type: "application/csv;charset=utf-8;"
                    });
                    navigator.msSaveBlob(blob, 'Test file.xls');
                }
            } else {
                $('#tests').attr('href', data_type + ', ' + encodeURIComponent(tab_text));
                $('#tests').attr('download', 'Test file.xls');
            }
        }
    
   
    </script>

【讨论】：

【解决方案2】：

将 Excel 文件中的 HTML 表格导出到离线视图和更多 Excel 编辑工作。当我们也需要表格的 CSS 时，这变得更加棘手。这是演示 Excel 导出的示例应用程序。将以下代码放在页面的 Head 部分。

var tableToExcel = (函数 () { var uri = '数据：应用程序/vnd.ms-excel；base64，' , 模板 = ' {工作表} {桌子}' , base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) } , 格式 = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) } 返回函数（表，名称）{ if (!table.nodeType) table = document.getElementById(table) var ctx = { 工作表：名称 || '工作表'，表格：table.innerHTML } window.location.href = uri + base64（格式（模板，ctx）） } })()

【讨论】：