使用JavaScript自动加载本地同目录CSV生成HTML表格的实现问题

前置注意事项 #

注意：如果直接通过file://协议打开本地HTML文件，浏览器的同源策略会禁止读取本地文件，报跨域错误。请使用本地静态服务运行页面，比如VS Code的Live Server插件、Python自带的python -m http.server命令均可快速启动可用的本地服务。

完整实现代码 #

HTML部分

在页面中预留表格渲染容器：

<div id="tableContainer"></div>

JavaScript部分

// 读取同级目录下的CSV文件，把./data.csv替换为你实际的CSV文件名
fetch('./data.csv')
  .then(response => {
    if (!response.ok) throw new Error('CSV文件读取失败，请检查路径是否正确')
    return response.text()
  })
  .then(csvText => {
    // 解析CSV内容为二维数组
    const rows = parseCSV(csvText)
    // 生成表格HTML
    let tableHtml = '<table border="1" cellpadding="8" cellspacing="0">'
    // 表头行逻辑，假设CSV第一行是表头，不需要可以删除这部分
    tableHtml += '<thead><tr>'
    rows[0].forEach(header => {
      tableHtml += `<th>${header}</th>`
    })
    tableHtml += '</tr></thead><tbody>'
    // 遍历生成数据行
    for (let i = 1; i < rows.length; i++) {
      tableHtml += '<tr>'
      rows[i].forEach(cell => {
        tableHtml += `<td>${cell}</td>`
      })
      tableHtml += '</tr>'
    }
    tableHtml += '</tbody></table>'
    // 插入到页面中
    document.getElementById('tableContainer').innerHTML = tableHtml
  })
  .catch(err => console.error('运行出错：', err))

// 通用CSV解析函数，兼容字段内带逗号、双引号的复杂场景
function parseCSV(csv) {
  const result = []
  const regex = /(,|\r?\n|\r|^)(?:"([^"]*(?:""[^"]*)*)"|([^",\r\n]*))/gi
  let matches
  let row = []
  while ((matches = regex.exec(csv))) {
    const delimiter = matches[1]
    if (delimiter.length && delimiter !== ',') {
      result.push(row)
      row = []
    }
    let cellValue
    if (matches[2]) {
      // 处理CSV标准的双引号转义规则
      cellValue = matches[2].replace(/""/g, '"')
    } else {
      cellValue = matches[3]
    }
    row.push(cellValue)
  }
  if (row.length) {
    result.push(row)
  }
  return result
}

补充说明 #

• 如果你的CSV没有表头，删除生成thead的相关代码，从索引0开始遍历数据行即可。
• 请确保CSV文件保存为UTF-8编码，避免出现中文乱码问题。

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