[英]Download HTML table colspan and rowspan no picked up
我有以下HTML表:
<a href="#" id ="download" role='button' class="button">Download</a>
<div id="dvData" class="table-responsive">
<table class="table table-bordered" id="example">
<thead>
<tr>
<th rowspan="3">Example</th>
<th colspan="7">Larger Header</th>
</tr>
<tr class="table_headers">
<th colspan="3">Sub Header 1</th>
<th colspan="3">Sub Header 2</th>
<th rowspan="2" class="align-middle">Sub Header 3</th>
</tr>
<tr class="table_headers">
<th>Sub sub header</th>
<th>Sub sub header</th>
<th>Sub sub header</th>
<th>Sub sub header</th>
<th>Sub sub header</th>
<th>Sub sub header</th>
</tr>
</thead>
<tbody>
<tr>
<td> Info</td>
<td> Info</td>
<td> Info</td>
<td> Info</td>
<td> Info</td>
<td> Info</td>
<td> Info</td>
<td> Info</td>
<td> Info</td>
<td> Info</td>
</tr>
</tbody>
</table>
</div>
我有以下JavaScript下载该表:
function exportTableToCSV($table, filename) {//used to export tables
var $headers = $table.find('tr:has(th)')
,$rows = $table.find('tr:has(td)')
,tmpColDelim = String.fromCharCode(11) // vertical tab character
,tmpRowDelim = String.fromCharCode(0) // null character
,colDelim = '","'
,rowDelim = '"\r\n"';
var csv = '"';
csv += formatRows($headers.map(grabRow));
csv += rowDelim;
csv += formatRows($rows.map(grabRow)) + '"';
var csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
if (window.navigator.msSaveOrOpenBlob) {
var blob = new Blob([decodeURIComponent(encodeURI(csv))], {
type: "text/csv;charset=utf-8;"
});
navigator.msSaveBlob(blob, filename);
} else {
$(this)
.attr({
'download': filename
,'href': csvData
});
}
function formatRows(rows){
return rows.get().join(tmpRowDelim)
.split(tmpRowDelim).join(rowDelim)
.split(tmpColDelim).join(colDelim);
}
function grabRow(i,row){
var $row = $(row);
var $cols = $row.find('td');
if(!$cols.length) $cols = $row.find('th');
return $cols.map(grabCol)
.get().join(tmpColDelim);
}
function grabCol(j,col){
var $col = $(col),
$text = $col.text();
return $text.replace('"', '""'); // escape double quotes
}
}
$("#download").click(function (event) {
outputFile = "example.csv"
exportTableToCSV.apply(this, [$('#dvData > table'), outputFile]);
});
当我下载文件时,标题弄乱了。 不保留colspan和rowpan属性。 我该如何解决?
也许这不是您想要的,但是可以将其导出到Excel,完全保留您想要的标题:
检查此https://jsfiddle.net/f2qh0t2b/1/
function generateExcel(el) {
var clon = el.clone();
var html = clon.wrap('<div>').parent().html();
//add more symbols if needed...
while (html.indexOf('á') != -1) html = html.replace(/á/g, 'á');
while (html.indexOf('é') != -1) html = html.replace(/é/g, 'é');
while (html.indexOf('í') != -1) html = html.replace(/í/g, 'í');
while (html.indexOf('ó') != -1) html = html.replace(/ó/g, 'ó');
while (html.indexOf('ú') != -1) html = html.replace(/ú/g, 'ú');
while (html.indexOf('º') != -1) html = html.replace(/º/g, 'º');
html = html.replace(/<td>/g, "<td> ");
window.open('data:application/vnd.ms-excel,' + encodeURIComponent(html));
}
$("#download").click(function (event) {
generateExcel($("#example"));
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.