Question

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

我还要添加更多内容吗？还有其他库或框架吗？

谢谢您的答复。

Answer 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>

Answer 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数据导入HTML表单

2 个答案: