所以，我有这个 HTML 表单：
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<form>
<label>Name</label>
<input type="text" name="name" id="name"> <br>
<label>Surname</label>
<input type="text" name="name" id="name"> <br>
<label>Birthday</label>
<input type="date" name="date" id="date">
<button type="submit">Submit</button>
</form>
</body>
</html>
我需要将插入的数据放入已经存在的 .csv 文件中，并且它与 html 文件位于同一文件夹中。我需要在没有任何类型的服务器的情况下离线使用此文件，我不想安装任何额外的东西，有什么方法可以做到这一点吗？
我感谢任何形式的帮助，提前致谢
我考虑过使用 php，但这意味着使用某种本地服务器，我想让事情尽可能简单。
您可以使用 JavaScript 和 HTML5 的 Blob 对象来实现此目的，它允许您在客户端处理类似文件的对象。我发布了一些 HTML 代码，下面包含一些 JS 代码，以展示如何使用它来将输入数据保存到提交的 CSV 文件中。
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<form id="myForm">
<label>Name</label>
<input type="text" name="name" id="name"> <br>
<label>Surname</label>
<input type="text" name="surname" id="surname"> <br>
<label>Birthday</label>
<input type="date" name="date" id="date">
<button type="submit">Submit</button>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(e) {
e.preventDefault();
var name = document.getElementById('name').value;
var surname = document.getElementById('surname').value;
var date = document.getElementById('date').value;
var csvContent = 'Name,Surname,Birthday\n' + name + ',' + surname + ',' + date;
var blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
if (navigator.msSaveBlob) { // IE 10+
navigator.msSaveBlob(blob, 'data.csv');
} else {
var link = document.createElement("a");
if (link.download !== undefined) { // feature detection
// Browsers that support HTML5 download attribute
var url = URL.createObjectURL(blob);
link.setAttribute("href", url);
link.setAttribute("download", 'data.csv');
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
});
</script>
</body>
</html>
在表单的提交事件中添加一个事件监听器，因此当提交表单时，它会阻止表单实际提交（这会刷新页面），而是获取输入字段的值，创建一个 CSV 格式的字符串这些值，然后从此字符串创建一个新的 Blob 对象。