html 输入文件类型 csv - Html (1)

📌 相关文章

📜 html 输入文件类型 csv - Html (1)

📅 最后修改于: 2023-12-03 14:41:56.989000 🧑 作者: Mango

HTML 输入文件类型 CSV - HTML

简介

CSV文件是逗号分隔值文件，常用于存储大量结构化数据。但是，CSV文件在解析和显示时结构不易理解和展示。因此，HTML文件被广泛应用于展示CSV文件数据。HTML文件不仅能够解析CSV文件中的数据，并且能够使用表格、样式、链接等HTML标签，呈现更美观、易读的数据显示效果。

本文介绍了如何将CSV数据输入到HTML文件中，以实现更好的展示效果。

使用方法

创建CSV文件，注意第一行为数据列名，第二行开始为数据记录。例如：

Name, Age, Gender
Tom, 20, Male
Lily, 18, Female
John, 22, Male

创建HTML文件，并引入CSV数据。例如：

<!DOCTYPE html>
<html>
<head>
	<title>CSV 数据展示</title>
</head>
<body>
	<table>
		<thead>
			<tr>
				<th>Name</th>
				<th>Age</th>
				<th>Gender</th>
			</tr>
		</thead>
		<tbody>
			<!-- 使用 JavaScript 解析 CSV 数据并生成表格 -->
			<script src="https://cdn.jsdelivr.net/npm/csvtojson/bin/csvtojson.min.js"></script>
			<script>
				csv()
				  .from('data.csv')
				  .then((jsonObj)=>{
				    // 将 CSV 文件数据映射为表格展示
				    jsonObj.forEach((obj) => {
				      const tr = document.createElement('tr');
				      Object.values(obj).forEach((val) => {
				        const td = document.createElement('td');
				        td.appendChild(document.createTextNode(val));
				        tr.appendChild(td);
				      });
				      document.querySelector('tbody').appendChild(tr);
				    });
				  })
			</script>
		</tbody>
	</table>
</body>
</html>

结论

HTML文件能够直接读取CSV数据并将其渲染成表格等形式，更易读、更美观。在数据可视化方面具有很大的潜力。