使用JavaScript读取CSV文件并展示到HTML表格的代码修复求助

现有代码存在的问题 #

• DOM选择逻辑错误：document.querySelector('notes.csv') 写法不符合规范，querySelector 作用是选择页面内的DOM元素，不能直接传入CSV文件名，且当前页面缺少供用户选择本地文件的上传控件。
• 文件读取参数错误：reader.readAsText() 方法需要传入目标文件对象作为参数，原代码传入了文件选择框DOM元素，无法正常读取内容。
• 函数无触发机制：定义的read函数没有绑定任何触发事件，页面加载后不会自动执行，自然没有效果。
• 冗余参数问题：read函数定义的callback参数未被实际使用，属于无效代码。

修复后完整代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>CSV内容表格展示</title>
<style>
/* 可选样式，优化表格显示效果 */
table {
  border-collapse: collapse;
  margin-top: 20px;
}
td {
  border: 1px solid #eee;
  padding: 6px 12px;
}
</style>
</head>
<body>
<!-- 新增CSV文件选择控件 -->
<input type="file" id="csvInput" accept=".csv">
<div id="dvCSV"></div>

<script type="text/javascript">
// 正确选中文件选择控件
const fileInput = document.querySelector('#csvInput');
// 绑定文件选择后触发的读取逻辑
fileInput.addEventListener('change', function() {
  // 未选中文件直接返回
  if (!fileInput.files || fileInput.files.length === 0) return;
  const targetFile = fileInput.files[0];
  const reader = new FileReader();
  reader.onload = function (e) {
    const table = document.createElement("table");
    const rows = e.target.result.split("\n");
    for (let i = 0; i < rows.length; i++) {
      // 过滤空行
      const rowContent = rows[i].trim();
      if (!rowContent) continue;
      const cells = rowContent.split(",");
      if (cells.length <= 1) continue;
      const row = table.insertRow(-1);
      for (let j = 0; j < cells.length; j++) {
        const cell = row.insertCell(-1);
        // 使用innerText避免XSS风险，比innerHTML更安全
        cell.innerText = cells[j].trim();
      }
    }
    const dvCSV = document.getElementById("dvCSV");
    dvCSV.innerHTML = "";
    dvCSV.appendChild(table);
  }
  // 传入正确的文件对象读取内容
  reader.readAsText(targetFile);
})
</script>
</body>
</html>

使用方法 #

页面运行后点击文件选择按钮，选中本地的notes.csv文件，即可自动将CSV内容渲染为表格展示。

内容的提问来源于stack exchange，提问作者Elena