极客笔记如何使用JavaScript从*.CSV文件中读取数据
在本文中，我们将学习如何使用JavaScript从*.CSV文件中读取数据。
为了将CSV数据转换或解析为数组，我们需要JavaScript的 FileReader 类，该类包含一个名为 readAsText() 的方法，该方法将读取CSV文件内容并将结果解析为字符串文本。
如果我们有了字符串，我们可以创建一个自定义函数将字符串转换为数组。
要读取CSV文件，首先我们需要接受该文件。
现在让我们看看如何使用HTML元素从浏览器接受CSV文件。
例子
以下是一个接受浏览器中的CSV文件的示例程序。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form id="myForm">
<input type="file" id="csvFile" accept=".csv" />
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
我们现在可以选择需要读取的csv文件。
现在让我们编写一个JavaScript代码来读取所选择的csv文件。
例子
以下是一个接受和读取csv文件的示例程序。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form id="myForm">
<input type="file" id="csvFile" accept=".csv" />
<br />
<input type="submit" value="Submit" />
</form>
<script>
const myForm = document.getElementById("myForm");
const csvFile = document.getElementById("csvFile");
myForm.addEventListener("submit", function (e) {
e.preventDefault();
const input = csvFile.files[0];
const reader = new FileReader();
reader.onload = function (e) {
const text = e.target.result;
document.write(text);
};
reader.readAsText(input);
});
</script>
</body>
</html>