我有以下HTML表格:下載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和rowspan屬性不保留。我如何解決這個問題?
編輯:這裏是https://jsfiddle.net/ALUW/2s1z9pa9/
你能製作一個小提琴嗎? –
https://jsfiddle.net/ALUW/2s1z9pa9/ – ALUW
CSV沒有行跨度或列跨度的概念。 – jessegavin