如何使用 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+ 瀏覽量

開啟你的 職業生涯

完成課程，獲得認證

開始學習
廣告