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

最新推荐文章于 2024-09-05 23:22:16 发布

allway2

最新推荐文章于 2024-09-05 23:22:16 发布

阅读量1.7k

点赞数 2

文章标签： javascript servlet 服务器

本文链接：https://blog.csdn.net/allway2/article/details/125422837

版权

本教程介绍了如何使用现代JavaScript从文件选择器或服务器上读取CSV文件，并将其内容显示在HTML表格中。通过示例代码，展示了如何处理CSV数据并生成表格，无需将CSV上传到服务器。注意，处理大量CSV文件时可能存在性能问题。

摘要由CSDN通过智能技术生成

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

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

示例代码下载

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

CSV 到 HTML 表格

好的，现在让我们来看看如何读取 CSV 文件并将其显示在 Javascript 中的 HTML 表格中的示例。

0) 虚拟 CSV

0-dummy.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

1a-read-csv.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

1b-读取-csv.js

// (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

2a-ajax-csv.html

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

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

2B) JAVASCRIPT

2b-ajax-csv.js

// (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)用来从服务器获取数据。