如何使用 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 文件。

现在让我们编写读取所选 csv 文件的 JavaScript 代码。

示例

以下是接受和读取 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>

更新日期：08-09-2023

39K+ 浏览量

开启你的 职业生涯

完成课程，获得认证

开始学习
广告
© . All rights reserved.