Question

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

Answer 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>

Answer 2

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

var tableToExcel =（function（）{ var uri ='data：application / vnd.ms-excel; base64，' ，template =' {worksheet} {表}' ，base64 =函数{返回window.btoa（unescape（encodeURIComponent（s）））} ，格式=函数（s，c）{返回s.replace（/ {（\ w +）} / g，函数（m，p）{返回c [p];}）} 返回函数（表，名称）{ 如果（！table.nodeType）table = document.getElementById（table） var ctx = {工作表：名称|| “工作表”，表：table.innerHTML} window.location.href = uri + base64（格式（模板，ctx）） } }）（）

使用CSS将HTML表格导出到Excel

2 个答案: