使用 CSS 将 Html 表格导出到 Excel
[英]Export Html Table to Excel with CSS
问题描述
我正在尝试通过保持表格样式将 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
2 个解决方案
解决方案1
1 2021-03-08 15:35:53
这是我使用的代码。 它生成一个 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
-1 2019-06-06 10:13:00
将 Excel 文件中的 HTML 表格导出到离线查看和更多 Excel 编辑工作。 当我们也需要表格的 CSS 时，这变得更加棘手。 这是演示 Excel 导出的示例应用程序。 将以下代码放在页面的 Head 部分。
var tableToExcel = (function () { var uri = 'data:application/vnd.ms-excel;base64,' , template = ' {worksheet} {table}' , base64 = function (s) { return window.btoa(unescape (encodeURIComponent(s))) } , format = function (s, c) { return s.replace(/{(\\w+)}/g, function (m, p) { return c[p]; }) } return function (table, name) { if (!table.nodeType) table = document.getElementById(table) var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML } window.location.href = uri + base64 （格式（模板，ctx））} }）（）
在 excel 中导出 html 表
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.