将 CSV 数据导入 HTML 表单答案

【问题标题】：Importing CSV data into HTML form将 CSV 数据导入 HTML 表单
【发布时间】：2018-10-10 03:52:07
【问题描述】：

我需要将数据从 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(); 
}

要我再补充一点吗？任何其他库或框架？

感谢您的任何回复。

【问题讨论】：

标签： javascript html csv

【解决方案1】：

效果很好，只需将<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>

【讨论】：

现在它可以正常工作了。非常感谢您解决了我的问题。

【解决方案2】：

再次感谢您的帮助。但我还有另一个问题。现在我需要将此上传控件添加到我的 Web 应用程序中。内容是根据用户行为自动生成的。负责打开表单的部分代码如下：

function  createFormOrderDetailsCSV()
{
    var out='';
    out+='<input id="upload" type="file">';
    out+='<form id="csvForm">';
    out+='<input id="a"></input>';
    out+='<input id="b"></input>';
    out+='<input id="c"></input>';
    out+='<input id="d"></input>';
    out+='</form>';
    out+='<script src="https://d3js.org/d3.v3.js"></script>';
    document.getElementById("OrderDetailsContainer").innerHTML=out;
    document.getElementById("upload").addEventListener("change", upload, 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];
        });

    }
}

又是一样的。文件已打开，但没有数据传输到表单中的文本输入控件。

【讨论】：

我不明白你到底需要什么，你想在文本框上查看上传的 csv 吗？
是的。这正是我所需要的。我需要将 csv 数据放入表单输入中，并将它们从表单发送到数据库。我可以发送到数据库，我只是无法从 csv 文件中检索数据。
好的，我更新了我的答案，检查一下，告诉我这是不是你需要的
fyk 我的代码需要大量修改，我只是想弄清楚你的主要需求:)
问题是没有包含d3.js。我放了一些警报来检查代码在哪里停止工作，它在 var parsedCSV = d3.csv.parseRows(csvData); 行停止。在函数上传（e）中。我需要以其他方式包含 d3.js，而不是现在完成。我尝试将它也包含在调用 createFormOrderDetailsCSV() 函数的 html 中，但没有帮助。