浏览器导出CSV表格

最新推荐文章于 2023-02-09 10:17:22 发布

这货，不靠谱

最新推荐文章于 2023-02-09 10:17:22 发布

阅读量1.3k

点赞数

分类专栏： Web 文章标签： CSV 前端 excle

本文链接：https://blog.csdn.net/weixin_43846510/article/details/87165855

版权

Web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

浏览器导出CSV表格

1.CSV文件
2.遍历table表格
3.将满足CSV文件的字符串生成为CSV文件
4.完整代码

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>

这货，不靠谱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器导出CSV表格

浏览器导出CSV表格1.CSV文件2.遍历table表格3.将满足CSV文件的字符串生成为CSV文件4.完整代码1.CSV文件逗号分隔值文件格式，其文件以纯文本形式存储表格数据（数字和文本）。纯文本意味着该文件是一个字符序列，不含必须像二进制数字那样被解读的数据。2.遍历table表格导入在线的jquery&lt;script src="https://code.jquery.com/j...
复制链接

扫一扫

专栏目录