使用 javascript/jquery 将 Html 表导出到 Excel
export Html table to excel using javascript/jquery
最近我做了一个网站,可以将表格的数据导出到Excel文件。我正在使用插件table2excel,它在Chrome上运行良好,但在IE,safari,Firefox或任何其他浏览器上不起作用。想知道我是否在这里做错了什么,是否有任何其他插件或方法可以做到这一点:
(注意:我正在使用名为Blade的Laravels模板引擎来包含table2excel插件).html:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title></title>
<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
{{ HTML::style('css/style.css') }}
<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
{{ HTML::script('js/jquery.table2excel.js') }}
{{ HTML::script('js/script.js') }}
</head>
<table id="signedinTable" class="peopleTable table table-hover">
<thead>
<tr>
<th>Voornaam</th>
<th>Achternaam</th>
<th>Telefoon nr.</th>
<th>E-mail</th>
<th>Bedrijf</th>
<th>Partner?</th>
</tr>
</thead>
<tbody>
@foreach($results as $result)
@if($result->isGoing == 1)
<tr class="signedinRow">
<td>{{ $result->firstname }}</td>
<td>{{ $result->lastname }}</td>
<td>{{ $result->phone }}</td>
<td>{{ $result->email }}</td>
<td>{{ $result->company }}</td>
<td class="signedinPartner">{{ $result->partner }}</td>
</tr>
@endif
@endforeach
</tbody>
</table>
</div>
<button id="signedinExport" class="excl btn btn-primary">Download als excel bestand</button>
jquery:
$("#signedinExport").click(function(){
$("#signedinTable").table2excel({
exclude:".noExl",
name:"Aangemelde mensen",
filename:"Aangemelde mensen"
});
});
我没有从IE,Firefox或Safari收到任何错误,还要注意,我并没有要求人们为我编写任何代码,只是朝着正确的方向推动会很棒!
请!非常感谢每一点帮助!
不使用 jQuery 函数,还有更多的代码,但你可以试一试:
function fnExcelReport()
{
var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
var textRange; var j=0;
tab = document.getElementById('headerTable'); // id of table
for(j = 0 ; j < tab.rows.length ; j++)
{
tab_text=tab_text+tab.rows[j].innerHTML+"</tr>";
//tab_text=tab_text+"</tr>";
}
tab_text=tab_text+"</table>";
tab_text= tab_text.replace(/<A[^>]*>|<'/A>/g, "");//remove if u want links in your table
tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
tab_text= tab_text.replace(/<input[^>]*>|<'/input>/gi, ""); // reomves input params
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv':11'./)) // If Internet Explorer
{
txtArea1.document.open("txt/html","replace");
txtArea1.document.write(tab_text);
txtArea1.document.close();
txtArea1.focus();
sa=txtArea1.document.execCommand("SaveAs",true,"Say Thanks to Sumit.xls");
}
else //other browser not tested on IE 11
sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
return (sa);
}
只需创建一个空白的 iframe:
<iframe id="txtArea1" style="display:none"></iframe>
在以下位置调用此函数:
<button id="btnExport" onclick="fnExcelReport();"> EXPORT </button>
链接到原始帖子
我最近遇到了类似的问题,并发现了(大部分)以下代码片段:
function exportTableToCSV($table, filename, answer) {
var $rows = $table.find('tr'),
//Temporary delimiter characters unlikely to be typed by keyboard
//This is to avoid accidentally splitting the actual contents
tmpColDelim = String.fromCharCode(11), //vertical tab character
tmpRowDelim = String.fromCharCode(0), //null character
//actual delimiter characters for CSV format
colDelim = '","',
rowDelim = '"'r'n"',
//Grab text from table into CSV formatted string
csv = '"' + $rows.map(function(i, row) {
var $row = $(row),
$cols = $row.find('th,td');
return $cols.map(function(j, col) {
var $col = $(col),
text = $col.text();
return text.replace(/"/g, '""'); //escape double quotes
}).get().join(tmpColDelim);
}).get().join(tmpRowDelim)
.split(tmpRowDelim).join(rowDelim)
.split(tmpColDelim).join(colDelim) + '"';
//Data URI
var IEwindow = window.open();
IEwindow.document.write(csv);
IEwindow.document.close();
if (IEwindow.document.execCommand('SaveAs', false, filename + ".csv")) {
saveAsAnswer = 'saved';
} else {
saveAsAnswer = 'not saved';
}
IEwindow.close();
}
我感到羞耻,因为我不记得我在哪里找到这个,也没有在应得的功劳上给予功劳......
我没有使用很多插件,因此喜欢上面的代码只使用 jQuery。我将上面的代码用于Internet Explorer 11。对于跨浏览器支持,您需要编辑数据 URI 部分(快速 SO 或 Google 搜索数据 URI)。
我创建了一个jsfiddle来向您展示它是如何工作的。
相关文章:
- 将HTML表格导出到excel时,无法将数据加载到excel文件中
- 将HTML表格导出到带有文本和图像的excel中
- 将HTML表导出到Excel,而不是使用C#下载文件
- 如何使用html中的javascript代码解析Excel文件
- 具有固定顶行和左列的Excel样式HTML表格的更好实现?(jsFiddle 示例)
- 导出 html 表到 Excel JavaScript 函数特殊字符已更改
- 隐藏列,同时使用 javascript 从 html 表导出到 excel
- 如何使用 JavaScript 或 jQuery 导出 HTML 表并追加为现有 Excel 中的工作表
- 将 HTML 表导出到 Excel JavaScript 函数添加选择文件名
- 如何使用JavaScript将数据从excel(xlsx,csv)导入HTML页面
- 将 Excel 文件转换为 HTML 和 JavaScript
- 使用 javascript/jquery 将 Html 表导出到 Excel
- 使用 JavaScript 函数将多个 HTML 表导出到 Excel
- Excel VBA / HTML 从下拉列表中单击下一页
- HTML 到 Excel 不适用于很多行
- 使用 java 脚本导出 html table excel.找到“#”时不导出
- 我是否可以根据单元格的值使用 excel 解析某个标签的值的 html 文件
- 如何使用HTML和javascript自动从Web上的下载URL读取Excel文件(无需下载)
- 从 HTML 表导出为 excel 显示带有标记的所有表内容
- 如何将excel文件导入Web应用程序(javascript/d3/html)