我需要将数据从 csv 文件导入到表单中。我尝试了本主题的示例:
How to import CSV file into HTML form, and export HTML form to CSV file
不幸的是，它对我不起作用。文件正在打开，但没有数据写入表单。
我的index.html 文件如下所示:
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" language="JavaScript" src="script.js"></script>
<script src="https://d3js.org/d3.v3.js"></script>
</head>
<body>
<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>
</body>
</html>
和 script.js 文件:
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]);
});
console.log(data);
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();
}
我要添加更多内容吗？还有其他库或框架吗？
感谢您的回复。
最佳答案
效果很好，
搬家吧<script type="text/javascript" language="JavaScript" src="script.js"></script>标签位于 <body> 的末尾标签
.
.
.
<script src="https://d3js.org/d3.v3.js"></script>
<script type="text/javascript" language="JavaScript" src="script.js"></script>
</body>
更新问题后我无法理解您到底需要什么，您想在文本框中查看上传的 csv 吗？如果是这样..
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<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>
<script src="https://d3js.org/d3.v3.js"></script>
<script type="text/javascript">
document.getElementById("upload").addEventListener("change", upload, false);
document.getElementById("download").addEventListener("click", download, false);
var out = "";
function upload(e) {
document.getElementById('csvForm').innerHTML = "";
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
if(d.constructor === Array){
// console.log(d);
// document.getElementById(d[0]).value = d[1];
createForm(d);
}
});
}
}
function createForm(csv){
// console.log(out);
for (var i in csv) {
out+='<input value="' +csv[i]+ '">';
}
document.getElementById('csvForm').innerHTML = out;
out+='<br>';
}
function download(e) {
data = [["id","value"]];
var f = d3.selectAll("#csvForm > input")[0];
f.forEach(function(d,i){
data.push([d.id, d.value]);
});
console.log(data);
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();
}
</script>
</body>
</html>关于javascript - 将 CSV 数据导入 HTML 表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52732363/