js导出html表格为csv实例

1002710030

已于 2023-08-21 15:27:15 修改

阅读量122

点赞数

文章标签： javascript html 前端

于 2023-08-04 16:09:34 首次发布

本文链接：https://blog.csdn.net/qq_35776207/article/details/132106856

版权

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<link rel="stylesheet" href="bootstrap.min.css">
	<script src="jquery.min.js"></script>
	<script src="bootstrap.min.js"></script>
</head>
<input type="submit" name="" value="导出" class="btn btn-primary" onclick="exportTableToCSV('table.csv')">
<table width="" class="table table-bordered">
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
</table>
<script>
	function exportTableToCSV(filename) {
		var csv = [];
		var rows = document.querySelectorAll("table tr");
		for (var i = 0; i < rows.length; i++) {
			var row = [], cols = rows[i].querySelectorAll("td, th");

			for (var j = 0; j < cols.length; j++) {
				var text = cols[j].textContent.replace(/(\r\n|\n|\r)/gm, "");
				row.push('"' + text + '"'); 
			}
			csv.push(row.join(","));
		}

		var blob = new Blob(["\uFEFF" + csv.join("\n")], {type: "text/csv;charset=utf-8;"});

		var link = document.createElement("a");
		if (link.download !== undefined) {
			var url = URL.createObjectURL(blob);
			link.setAttribute("href", url);
			link.setAttribute("download", filename);
			link.style.visibility = 'hidden';
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);
		}
	}
</script>