JavaScript导出CSV文件，简单js导出，无需库！

最新推荐文章于 2024-03-25 09:44:12 发布

Eason_Lou

最新推荐文章于 2024-03-25 09:44:12 发布

阅读量1.8k

点赞数

分类专栏：前端文章标签： javascript csv

本文链接：https://blog.csdn.net/weixin_54366356/article/details/117295317

版权

前端专栏收录该内容

28 篇文章 3 订阅

订阅专栏

JavaScript根据json数据或table表格导出CSV文件

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>JavaScript导出CSV文件</title>
		<link rel="stylesheet" type="text/css" href="bootstrap-3.4.1-dist/css/bootstrap.css" />
	</head>
	<style type="text/css">

	</style>
	<body>
		<div class="col-lg-12">
			<button type="button" class="btn btn-primary" id="btn1">从表格导出CSV</button>
			<button type="button" class="btn btn-primary" id="btn2">根据json数据导出CSV</button>
			<table class="table table-bordered" id="tableId">
				<thead>
					<tr>
						<th>序号</th>
						<th>姓名</th>
						<th>电话</th>
						<th>资产/亿元</th>
					</tr>
				</thead>
				<tbody id="tbody">
					<tr>
						<td>1</td>
						<td>马云</td>
						<td>10086</td>
						<td>3874</td>
					</tr>
					<tr>
						<td>2</td>
						<td>马化腾</td>
						<td>10086</td>
						<td>3527</td>
					</tr>
					<tr>
						<td>3</td>
						<td>许家印</td>
						<td>10086</td>
						<td>2759</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
	<script src="js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript">
		// 从table导出CSV
		function byTableDownLoadCsv(tableId, csvFileName) {
			let js_csv = {
				export_csv: function(data, name) {
					// “\ufeff” BOM头
					var uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(data);
					var downloadLink = document.createElement("a");
					downloadLink.href = uri;
					downloadLink.download = (name + ".csv") || "temp.csv";
					document.body.appendChild(downloadLink);
					downloadLink.click();
					document.body.removeChild(downloadLink);
				},
				export_table: function(selector, name) {
					var self = this;
					if (document.querySelectorAll(selector).length == 0) {
						alert('Selector "' + selector + '" not exists!');
						return false;
					}
					self.export_csv(self.get_table_data(selector), name);
				},
				get_table_data: function(selector) {
					var data = "";
					document.querySelectorAll(selector + ' tr').forEach(function(t) {
						var tmp = [];
						t.querySelectorAll('th,td').forEach(function(e) {
							tmp.push(e.innerText.replace("\n", "")); // 单元格里含有多个html元素可能会获取到换行符
						});
						data += tmp.join(",") + "\n";
					});
					return data;
				}
			};
			js_csv.export_table(tableId, csvFileName);
		};
		let jsonData = new Array(10).fill({
			name: '小明',
			tel: 10086,
			money: 1000
		});
		let str = ""
		for (let i = 0; i < jsonData.length; i++) {
			str += `<tr><td>${i+1}</td>`
			let item = jsonData[i];
			for (key in item) {
				str += `<td>${item[key]}</td>`
			}
		}
		document.querySelector("#tbody").innerHTML = str
		//根据json数据导出CSV
		function byJsonDownLoadCsv(data, csvTrName, fileName) {
			let jsonData = data;
			//列标题，逗号隔开，每一个逗号就是隔开一个单元格
			let str = csvTrName;
			//增加\t为了不让表格显示科学计数法或者其他格式
			for (let i = 0; i < jsonData.length; i++) {
				for (let item in jsonData[i]) {
					str += `${jsonData[i][item] + '\t'},`;
				}
				str += '\n';
			}
			//encodeURIComponent解决中文乱码
			let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
			//通过创建a标签实现
			let link = document.createElement("a");
			link.href = uri;
			//对下载的文件命名
			link.download = `${fileName}.csv`;
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);
		};
		//方法一:从表格导出的文件
		//byTableDownLoadCsv('#tableId', '从表格导出的文件');
		//byTableDownLoadCsv方法接收两个参数byTableDownLoadCsv(data1,data2)
		//data1:table表格的id，需要加#号
		//data2:导出的CSV的文件名称,不需要加文件后缀名.csv 
		//使用时直接调用byTableDownLoadCsv此函数即可
		//byTableDownLoadCsv('#tableId', '从表格导出的文件');
		document.querySelector("#btn1").onclick = function() {
			byTableDownLoadCsv('#tableId', '从表格导出的文件');
		}


		//方法二:根据json数据导出的文件
		//byJsonDownLoadCsv(jsonData, `姓名,电话,资产（亿元）\n`, '根据json数据导出的文件');
		//byJsonDownLoadCsv方法接收三个参数byJsonDownLoadCsv(data1,data2,data3)
		//data1:需要导出的CSV json数据 例:[{},{},{},{}]
		//data2:导出的CSV的第一行字段名称，例如:机种、制程、良率......,必须以 `机种,制程,良率\n` 此种格式传参
		//data3:导出的CSV的文件名称,不需要加文件后缀名.csv 
		//使用时直接调用byJsonDownLoadCsv此函数即可
		//byJsonDownLoadCsv(jsonData, `姓名,电话,资产（亿元）\n`, '根据json数据导出的文件');
		document.querySelector("#btn2").onclick = function() {
			byJsonDownLoadCsv(jsonData, `姓名,电话,资产（亿元）\n`, '根据json数据导出的文件');
		}
	</script>
</html>

Eason_Lou

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JavaScript导出CSV文件，简单js导出，无需库！

JavaScript根据json数据或table表格导出CSV文件<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=e
复制链接

扫一扫