我正在尝试从数据表导出到 CSV 文件。这是我的整个功能。它下载一个文件,但它显示了表的完整代码,并且没有分离出任何数据。当我说整个代码时,我指的是“table /table”中的所有内容
function displayDataTable(index){
$("#pageOverlay").empty();
html = "<div id='volumeChartDiv'><h4>Data Table</h4><table id='dataTable' class='table table-bordered table-striped dataTable' role='grid'><thead><tr role='row'><th>header1</th><th>header2</th><th>header3</th></tr></thead><tbody><tr><td>cell1-1</td><td>cell1-2</td><td>cell1-3</td></tr><tr><td>bell2-1</td><td>bell2-2</td><td>bell2-3</td></tr><tr><td>fell3-1</td><td>fell3-2</td><td>fell3-3</td></tr></tbody></table><input type='button' value='Close' onclick='closeOverlay()'> <input type='button' id='exportDataTable' value='Export Table'></div>";
$("#pageOverlay").html(html);
// export data function
$("#exportDataTable").click(function (e) {
window.open('data:application/vnd.ms-excel,' + $('.dataTable').html());
e.preventDefault();
});
openOverlay();
}
CSV 格式无法接受
$('.dataTable').html()
,因为 .html()
不是结构化数据,它甚至不是数据,只是一个愚蠢的 hmtl。
您必须从表中获取数据,制作一个表示 CSV 格式的字符串,然后下载它,因为您没有显示表数据结构,所以下面是工作演示
$('#export').click(function() {
var titles = [];
var data = [];
/*
* Get the table headers, this will be CSV headers
* The count of headers will be CSV string separator
*/
$('.dataTable th').each(function() {
titles.push($(this).text());
});
/*
* Get the actual data, this will contain all the data, in 1 array
*/
$('.dataTable td').each(function() {
data.push($(this).text());
});
/*
* Convert our data to CSV string
*/
var CSVString = prepCSVRow(titles, titles.length, '');
CSVString = prepCSVRow(data, titles.length, CSVString);
/*
* Make CSV downloadable
*/
var downloadLink = document.createElement("a");
var blob = new Blob(["\ufeff", CSVString]);
var url = URL.createObjectURL(blob);
downloadLink.href = url;
downloadLink.download = "data.csv";
/*
* Actually download CSV
*/
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
});
/*
* Convert data array to CSV string
* @param arr {Array} - the actual data
* @param columnCount {Number} - the amount to split the data into columns
* @param initial {String} - initial string to append to CSV string
* return {String} - ready CSV string
*/
function prepCSVRow(arr, columnCount, initial) {
var row = ''; // this will hold data
var delimeter = ','; // data slice separator, in excel it's `;`, in usual CSv it's `,`
var newLine = '\r\n'; // newline separator for CSV row
/*
* Convert [1,2,3,4] into [[1,2], [3,4]] while count is 2
* @param _arr {Array} - the actual array to split
* @param _count {Number} - the amount to split
* return {Array} - splitted array
*/
function splitArray(_arr, _count) {
var splitted = [];
var result = [];
_arr.forEach(function(item, idx) {
if ((idx + 1) % _count === 0) {
splitted.push(item);
result.push(splitted);
splitted = [];
} else {
splitted.push(item);
}
});
return result;
}
var plainArr = splitArray(arr, columnCount);
// don't know how to explain this
// you just have to like follow the code
// and you understand, it's pretty simple
// it converts `['a', 'b', 'c']` to `a,b,c` string
plainArr.forEach(function(arrItem) {
arrItem.forEach(function(item, idx) {
row += item + ((idx + 1) === arrItem.length ? '' : delimeter);
});
row += newLine;
});
return initial + row;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="export">export</button>
<table class="dataTable">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
如果您发现任何错误,请在下面评论,我会修复它们
对 Medet 答案的一个小改进,假设您的标题位于 tr 中,所有这些代码所做的就是获取所有列和行,将其推送到普通数组中并导出到 csv。
$('#export').click(function() {
var titles = [];
var data = [];
$('.table tr').each(function() {
data.push($(this));
});
csv_data = []
data.forEach(function(item,index){
td = item[0].children
for(i=0;i<td.length;i++){
csv_data.push(td[i].innerText)
}
csv_data.push('\r\n')
})
var downloadLink = document.createElement("a");
var blob = new Blob(["\ufeff", csv_data]);
var url = URL.createObjectURL(blob);
downloadLink.href = url;
downloadLink.download = "minicrawl.csv";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
})
如果数据不太复杂,那么你可以不用 jQuery:
const csvContents = [].map.call(document.getElementById('dataTable').rows,
tr => [].map.call(tr.cells, td => td.textContent).join(',')
).join('\n'))
然后像其他答案一样下载文件。
如果数据有点复杂(例如,数据中有逗号),这将不起作用,但在这种情况下,您可能应该首先使用 csv 库。
我使用上面 Teepeenm 的解决方案,并进行了一些小的改进,以避免数据有逗号的问题:
const csvContents = [].map.call(document.getElementById($(this).data('target')).rows,
tr => '"' + [].map.call(tr.cells, td => td.textContent).join('","') + '"').join('\n');