在 Javascript 中将 CSV 显示为表格（简单示例）

欢迎阅读有关如何读取 CSV 文件并将其显示在 Javascript 中的 HTML 表格中的教程。需要在将 CSV 上传到服务器之前将其显示为 HTML 表格？或者服务器上有一个 CSV 文件需要在 HTML 表格中显示？好吧，使用现代 Javascript 是可能的——请继续阅读示例！

ⓘ 我在本教程开始时包含了一个包含所有源代码的 zip 文件，因此您不必复制粘贴所有内容……或者如果您只是想直接进入。

示例代码下载

单击此处下载所有示例源代码，我已在 MIT 许可下发布它，因此请随意在其上构建或在您自己的项目中使用它。

 

0) 虚拟 CSV

Jo Doe,jo@doe.com,465785
Joa Doe,joa@doe.com,123456
Job Doe,job@doe.com,234567
Joe Doe,joe@doe.com,345678
Jog Doe,jog@doe.com,578456
Joh Doe,joh@doe.com,378945
Joi Doe,joi@doe.com,456789
Jon Doe,jon@doe.com,987654
Jor Doe,jor@doe.com,754642
Joy Doe,joy@doe.com,124578

首先，让我们从虚拟 CSV 文件开始。对于不知道 CSV（逗号分隔值）如何工作的人：

• CSV 文件本质上是文本文件。
• 我们使用换行符\r\n来指示新行。
• 我们使用逗号,来表示一个新列。

 

1) 从文件选择器中读取 CSV

1A) HTML

<!-- (A) PICK CSV FILE -->
<input type="file" accept=".csv" id="demoPick"/>
 
<!-- (B) GENERATE HTML TABLE HERE -->
<table id="demoTable"></table>

对于第一个示例，我们将从 an 中选择一个 CSV<input type="file">并将其显示在<table id="demoTable">.

 

 

1B) JAVASCRIPT

// (A) GET HTML FILE PICKER & TABLE
let picker = document.getElementById("demoPick"),
    table = document.getElementById("demoTable");
 
// (B) ON SELECTING CSV FILE
picker.onchange = () => {
  // (B1) REMOVE OLD TABLE ROWS
  table.innerHTML = "";
 
  // (B2) READ CSV & GENERATE TABLE
  let reader = new FileReader();
  reader.addEventListener("loadend", () => {
    let csv = reader.result.split("\r\n");
    for (let row of csv) {
      let tr = table.insertRow();
      for (let col of row.split(",")) {
        let td = tr.insertCell();
        td.innerHTML = col;
      }
    }
  });
  reader.readAsText(picker.files[0]);
};

不打算逐行解释，但重要的部分是：

• reader.readAsText(SELECTED FILE)将选定的 CSV 文件读取为文本。
• let csv = reader.result.split("\r\n")还记得 CSV 文件\r\n用来指示新行吗？我们只是将整个“CSV 文本”块拆分为行。
• for (let row of csv) { for (let col of row.split(","))对于每一行，我们进一步分解列并绘制表格行/单元格。

是的，没错。无需将 CSV 文件上传到服务器，现代 Javascript 能够读取文件。

 

 

2) AJAX 从服务器获取 CSV

2A) HTML

<!-- (A) GENERATE HTML TABLE HERE -->
<table id="demoTable"></table>

如果 CSV 文件在服务器上，我们也可以使用 AJAX fetch 来生成表。

 

 

2B) JAVASCRIPT

// (A) GET HTML TABLE
let table = document.getElementById("demoTable");
 
// (B) AJAX FETCH CSV FILE
fetch("0-dummy.csv")
.then((res) => { return res.text(); })
.then((csv) => {
  // (B1) REMOVE OLD TABLE ROWS
  table.innerHTML = "";
 
  // (B2) GENERATE TABLE
  csv = csv.split("\r\n");
  for (let row of csv) {
    let tr = table.insertRow();
    for (let col of row.split(",")) {
      let td = tr.insertCell();
      td.innerHTML = col;
    }
  }
});

是的，这与文件选择器示例几乎相同。除了我们现在fetch(CSV FILE)用来从服务器获取数据。

 

 

性能问题和限制

在撰写本文时，似乎没有办法逐行读取 CSV 文件。因此，如果您正在处理大量 CSV 文件，请当心——这可能会导致“内存不足”问题和性能问题。