如何动态地将数据添加到数组中并将其导出客户端csv答案

【问题标题】：How to add data into array dynamically and export it client side csv如何动态地将数据添加到数组中并将其导出客户端csv
【发布时间】：2021-04-21 20:03:54
【问题描述】：

如何从数组中获取用户的输入数据并将这些数据导出到 csv 文件中使用 javascript 的最佳方法是什么。表格将包含姓名、地址、电话、鞋子尺码、城市.. 我需要为我的“添加”按钮创建一个函数，以防止用户收集数据。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>Nome</p>
    <input type="text" name="txtname" id="txtname" />
    <p>Endereço</p>
    <input type="text" name="txtend" id="txtend" /><br /><br />
    //How do i do to keep adding data to my spreadsheet using "add" button?
    <button type="button" id="txtins">add</button>
    <button type="button" id="txtcsv">Download</button>
    <script>
      document.getElementById("txtcsv").addEventListener("click", function () {
        var array = [];
        array.push(document.getElementById("txtname").value);
        array.push(document.getElementById("txtend").value);
        var csv = array.join(",");
        console.log(csv);
        var file = "data:text/csv;charset=utf-8," + csv + "\n";
        var encoded_file = encodeURI(file);
        var link = document.createElement("a");
        link.setAttribute("href", encoded_file);
        link.setAttribute("download", "file.csv");
        document.body.appendChild(link);
        link.click();
      });
    </script>
  </body>
</html>

【问题讨论】：

请编辑您的问题并添加您的 JS 代码，并说明您在该代码中遇到问题的位置。请注意：本网站不是代码编写服务。我们帮助人们用自己的代码解决问题。
到目前为止你尝试过什么？最简单的方法是将所有记录放在一个数组中，当用户完成他/她的所有输入时，只需在那里创建 csv 文件。如前所述，您能否补充一些关于您在 javascript 中所做的事情的见解？
您好！目前，您有多个问题合二为一。请更具体

标签： javascript arrays export-to-csv

【解决方案1】：

这将创建一个字符串变量，其中 <input> 元素的值作为 csv 并对该变量进行编码并生成一个下载链接。（从sn-p下载不起作用）

document.getElementById("txtcsv").addEventListener("click", function() {
  var array = [];
  array.push(document.getElementById("txtname").value);
  array.push(document.getElementById("txtend").value);
  var csv = array.join(",");
  console.log(csv);
  var file = "data:text/csv;charset=utf-8," + csv + "\n";
  var encoded_file = encodeURI(file);
  var link = document.createElement("a");
  link.setAttribute("href", encoded_file);
  link.setAttribute("download", "file.csv");
  document.body.appendChild(link);
  link.click();
});

<p>Nome</p>
<input type="text" name="txtname" id="txtname" />
<p>Endereço</p>
<input type="text" name="txtend" id="txtend" /><br /><br />
<button type="button" id="txtcsv">Inscrever</button>

【讨论】：

我忘了提一件事。我如何循环它，所以人们继续添加数据并填充电子表格。我添加了一个新按钮并切换 de id。
您可以将下载代码移动到单独的事件监听器中