Javascript 如何将CSV文件导入HTML表单,以及如何将HTML表单导出为CSV文件
尝试将CSV文件导入HTML表单时遇到问题。我希望用户能够从他们的计算机上选择一个CSV文件,当他们这样做时,它会自动为他们填写表格。同时,如果用户没有导入文件,我希望是这样,这样他们可以将新键入的表单导出到CSV文件中,并将其保存到计算机中。我真的很想使用javascript,而不是PHP或数据库。这似乎不太难,只是不知道从哪里开始。感谢您的回答。基本上,CSV文件是一个格式化的文本文件。您可以使用来实现这一点。我想这会让您开始。我用它来解析文件 HTMLJavascript 如何将CSV文件导入HTML表单,以及如何将HTML表单导出为CSV文件,javascript,html,forms,csv,Javascript,Html,Forms,Csv,尝试将CSV文件导入HTML表单时遇到问题。我希望用户能够从他们的计算机上选择一个CSV文件,当他们这样做时,它会自动为他们填写表格。同时,如果用户没有导入文件,我希望是这样,这样他们可以将新键入的表单导出到CSV文件中,并将其保存到计算机中。我真的很想使用javascript,而不是PHP或数据库。这似乎不太难,只是不知道从哪里开始。感谢您的回答。基本上,CSV文件是一个格式化的文本文件。您可以使用来实现这一点。我想这会让您开始。我用它来解析文件 HTML 你应该告诉我们你已经尝试了什么,我真
你应该告诉我们你已经尝试了什么,我真的什么都没试过,因为我不知道从哪里开始,也不知道该用什么。谢谢@谢谢你的详细回答!我唯一需要的是,用户能够将表单数据导出到CSV,并将其保存到计算机。有什么建议吗?谢谢,太棒了!这正是我需要的。非常感谢你的帮助。
<input id="upload" type="file">
<form id="csvForm">
<input id="a"></input>
<input id="b"></input>
<input id="c"></input>
<input id="d"></input>
</form>
<button id="download">Download</button>
document.getElementById("upload").addEventListener("change", upload, false);
document.getElementById("download").addEventListener("click", download, false);
function upload(e) {
var data = null;
var file = e.target.files[0];
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function (event) {
var csvData = event.target.result;
var parsedCSV = d3.csv.parseRows(csvData);
parsedCSV.forEach(function (d, i) {
if (i == 0) return true; // skip the header
document.getElementById(d[0]).value = d[1];
});
}
}
function download(e) {
data = [["id","value"]];
var f = d3.selectAll("#csvForm > input")[0];
f.forEach(function(d,i){
data.push([d.id, d.value]);
});
var csvContent = "data:text/csv;charset=utf-8,";
data.forEach(function (d, i) {
dataString = d.join(",");
csvContent += i < data.length ? dataString + "\n" : dataString;
});
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "FormData.csv");
link.click();
}
id,value
a,red
b,blue
c,green
d,yellow