如何在HTML/JavaScript中直接指定路径读取CSV文件？

你之前用FileReader报错是因为它的设计目的是读取用户手动选择的本地文件，不能直接传入文件路径（不管是本地路径还是服务器路径）——浏览器的安全机制不允许JavaScript直接访问文件系统路径，也没法通过路径直接拉取服务器上的文件。要直接读取已知路径的CSV，应该用HTTP请求工具（比如fetch或者XMLHttpRequest）来获取文件内容。

用fetch实现的修改代码 #

把你原来的脚本部分替换成下面的代码，只要ventilatie.csv和当前HTML文件在同一服务器目录下（或者填写完整的相对/绝对路径），就能直接读取：

<table>
    <tr>
    <td><h2 id="koptekst"></h2></td>
    <td><button onclick="history.back()" style="float:right">Terug</button></td>
    </tr>
    <tr>
        <td><p id="uitleg"></p></td>
        <td><p><img id="plaatje" style="width:180px"></p>
        <p id="bijschrift"></p></td>
    </tr>
</table>

<script>
window.onload = async () => {
    try {
        // 填入你的CSV文件路径，相对/绝对路径均可
        const response = await fetch('ventilatie.csv');
        const csv = await response.text();
        
        // 解析CSV（注：如果单元格包含换行、分号，这种简单拆分可能出错，复杂场景建议用专业CSV解析库）
        const rows = csv.split('\n').filter(row => row.trim() !== ''); // 过滤空行
        const row = rows[3].split(';');
        
        document.getElementById("koptekst").innerHTML = row[1];
        document.getElementById("uitleg").innerHTML = row[2];
        document.getElementById("plaatje").src = row[3];
        document.getElementById("bijschrift").innerHTML = row[4];
    } catch (error) {
        console.error('读取CSV失败:', error);
    }
}
</script>
</body>

注意事项 #

• 确保CSV文件和HTML文件在同一域名下，跨域场景需要服务器配置CORS规则。
• 简单的字符串拆分仅适用于结构单一的CSV，若单元格包含换行、分号或引号，建议使用Papa Parse这类专业CSV解析库避免解析错误。
• 测试时不要直接打开本地HTML文件（file://协议），建议用本地服务器（比如VS Code的Live Server插件）运行，否则可能因浏览器文件访问限制导致请求失败。

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