时间戳

首页 > 解决方案 > 使用 CSS 将 Html 表导出到 Excel

javascript - 使用 CSS 将 Html 表导出到 Excel

问题描述

我正在尝试通过保持表格样式将 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

标签： javascriptjquerycssexcelhtml-table

解决方案

这是我使用的代码。它生成一个 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>

推荐阅读