使用 CSS 将 Html 表格导出到 Excel

Question

I'm trying to export a HTML table to Excel by keeping table style.我正在尝试通过保持表格样式将 HTML 表格导出到 Excel。 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.他们有一些问题，比如 CSS 不工作或不支持标题。

This is the code I have, but the file gets downloaded without an XLS extension.这是我拥有的代码，但下载的文件没有 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://jsfiddle.net/lesson8/jWAJ7/

I used code from this link, but it didn't work: https://www.codeproject.com/Tips/755203/Export-HTML-table-to-Excel-With-CSS我使用了此链接中的代码，但它不起作用： https : //www.codeproject.com/Tips/755203/Export-HTML-table-to-Excel-With-CSS

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

Answer 1

This is the code I use.这是我使用的代码。 it makes a Xls and gives a warning but it works and gets the data and css.它生成一个 Xls 并发出警告，但它可以工作并获取数据和 css。 Might be almost 2 years after you posted the question but I thought why not.可能在您发布问题后将近 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

Export the HTML table in Excel file to offline view and more Excel editing work.将 Excel 文件中的 HTML 表格导出到离线查看和更多 Excel 编辑工作。 This turns more tricky when we need the CSS of the table too.当我们也需要表格的 CSS 时，这变得更加棘手。 Here is the sample application demonstrating the Excel export.这是演示 Excel 导出的示例应用程序。 Put the below code in your Head part of the page.将以下代码放在页面的 Head 部分。

使用 CSS 将 Html 表格导出到 Excel

问题描述

2 个解决方案

解决方案1
1 2021-03-08 15:35:53

解决方案2
-1 2019-06-06 10:13:00

使用 CSS 将 Html 表格导出到 Excel

问题描述

2 个解决方案

解决方案1 1 2021-03-08 15:35:53

解决方案2 -1 2019-06-06 10:13:00

解决方案1
1 2021-03-08 15:35:53

解决方案2
-1 2019-06-06 10:13:00