1.CSV文件
逗号分隔值文件格式,其文件以纯文本形式存储表格数据(数字和文本)。纯文本意味着该文件是一个字符序列,不含必须像二进制数字那样被解读的数据。
2.遍历table表格
导入在线的jquery
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
将表格中的数据转换为CSV文件格式的字符串
var str="";
$("#data tr").each(function(i){
$(this).children('td').each(function(j){
str+=$(this).text()+",";
});
str+="\n";
});
3.将满足CSV文件的字符串生成为CSV文件
function createCSV(str){
var link = document.createElement("a");
var csvContent = "data:text/csv;charset=GBK,\uFEFF" + str;
var encodedUri = encodeURI(csvContent);
link.setAttribute("href", encodedUri);
link.setAttribute("download", "data.csv");
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
//注:如果str的数据过大,因为url有最大长度限制,encodeURI是会把字符串转化为url,超出限制长度部分数据丢失导致下载失败.所以面对大量数据的返回结果时应该使用Blod(二进制大对象)的方式来存放缓存数据.
4.完整代码
<!DOCTYPE html>
<html>
<head>
<title>导出表格CSV数据</title>
</head>
<body>
<table id="data" border="1" style="border-collapse: collapse;">
<tr>
<td>姓名</td>
<td>性别</td>
<td>语文</td>
<td>数学</td>
<td>外语</td>
</tr>
<tr>
<td>小明</td>
<td>男</td>
<td>100</td>
<td>30</td>
<td>40</td>
</tr>
<tr>
<td>小红</td>
<td>女</td>
<td>50</td>
<td>70</td>
<td>80</td>
</tr>
<tr>
<td>小张</td>
<td>男</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</table>
<br>
<input type="button" value="导出CSV" id="bt">
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$("#bt").click(function(){
var str="";
$("#data tr").each(function(i){
$(this).children('td').each(function(j){
str+=$(this).text()+",";
});
str+="\n";
});
createCSV(str);
});
function createCSV(str){
var link = document.createElement("a");
var csvContent = "data:text/csv;charset=GBK,\uFEFF" + str;
var encodedUri = encodeURI(csvContent);
link.setAttribute("href", encodedUri);
link.setAttribute("download", "data.csv");
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
</script>
</html>