无服务器与Python环境下，如何用HTML表单操作本地CSV文件？

完全不需要服务器或Python环境，用HTML+JS就能实现需求，核心利用浏览器的File API和下载功能：

• 读取展示CSV：通过File API读取本地CSV文件，解析后生成表格展示
• 添加记录并保存：把新记录追加到数据中，生成新的CSV内容后触发浏览器下载，由你手动覆盖原文件

完整可运行代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>本地CSV管理器</title>
    <style>
        table { border-collapse: collapse; margin: 20px 0; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
        form { margin: 20px 0; }
        input { margin: 5px; padding: 6px; }
    </style>
</head>
<body>
    <h2>上传CSV文件</h2>
    <input type="file" id="csvFile" accept=".csv">
    <table id="csvTable"></table>

    <h2>添加新记录</h2>
    <form id="addRecordForm">
        <!-- 请根据你的CSV列数和字段名修改输入框 -->
        <input type="text" id="field1" placeholder="字段1" required>
        <input type="text" id="field2" placeholder="字段2" required>
        <button type="submit">添加并导出更新文件</button>
    </form>

    <script>
        let csvData = [];
        let csvHeaders = [];

        // 读取并解析上传的CSV
        document.getElementById('csvFile').addEventListener('change', function(e) {
            const selectedFile = e.target.files[0];
            if (!selectedFile) return;

            const reader = new FileReader();
            reader.onload = function(event) {
                const rawText = event.target.result;
                const lines = rawText.split('\n').filter(line => line.trim());
                csvHeaders = lines[0].split(',');
                csvData = lines.slice(1).map(line => line.split(','));
                renderTable();
            };
            reader.readAsText(selectedFile);
        });

        // 渲染CSV表格
        function renderTable() {
            const table = document.getElementById('csvTable');
            table.innerHTML = '';

            // 生成表头
            const headerRow = document.createElement('tr');
            csvHeaders.forEach(header => {
                const th = document.createElement('th');
                th.textContent = header;
                headerRow.appendChild(th);
            });
            table.appendChild(headerRow);

            // 生成数据行
            csvData.forEach(row => {
                const tr = document.createElement('tr');
                row.forEach(cell => {
                    const td = document.createElement('td');
                    td.textContent = cell;
                    tr.appendChild(td);
                });
                table.appendChild(tr);
            });
        }

        // 处理表单提交，生成更新后的CSV
        document.getElementById('addRecordForm').addEventListener('submit', function(e) {
            e.preventDefault();
            if (csvHeaders.length === 0) {
                alert('请先上传你的CSV文件');
                return;
            }

            // 获取新记录的字段值（根据你的CSV列数调整这里的数量）
            const newRecord = [
                document.getElementById('field1').value,
                document.getElementById('field2').value
            ];
            csvData.push(newRecord);
            renderTable();

            // 拼接成CSV格式内容
            const updatedCsv = [
                csvHeaders.join(','),
                ...csvData.map(row => row.join(','))
            ].join('\n');

            // 触发浏览器下载
            const blob = new Blob([updatedCsv], { type: 'text/csv;charset=utf-8;' });
            const downloadUrl = URL.createObjectURL(blob);
            const downloadLink = document.createElement('a');
            downloadLink.href = downloadUrl;
            downloadLink.setAttribute('download', 'updated.csv');
            document.body.appendChild(downloadLink);
            downloadLink.click();
            document.body.removeChild(downloadLink);

            // 清空表单
            this.reset();
        });
    </script>
</body>
</html>

使用步骤 #

1. 把上面的代码复制到记事本，保存为csv-manager.html文件
2. 直接用浏览器打开这个HTML文件
3. 点击“选择文件”上传你的本地CSV，页面会自动显示表格
4. 填写新记录后点击按钮，浏览器会下载更新后的CSV，你把它重命名成原文件名覆盖即可

注意事项 #

• 必须根据你的CSV实际列数，修改表单里的输入框数量，以及JS中newRecord数组的元素数量
• 由于浏览器安全限制，无法直接修改本地文件，只能通过下载新文件手动覆盖，这是纯前端方案的唯一限制，但完全满足你的无服务器、无Python的需求

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