javascript 如何将html表单导出到csv文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22264375/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to export html form to csv file
提问by user3204722
I am trying to create a form that a user can enter data into and then when they click submit, that data will be added as a new row to a csv file stored on the server which I can then download. I have tried both some php stuff and javascript, both of which seem to be good, but I am not very experienced in either.
我正在尝试创建一个表单，用户可以在其中输入数据，然后当他们单击提交时，该数据将作为新行添加到存储在服务器上的 csv 文件中，然后我可以下载该文件。我已经尝试了一些 php 和 javascript，这两个看起来都不错，但我都不是很有经验。
Here is basicaly the html form:
这里基本上是 html 表单：
<form name="xyz_form">
<section class="border-bottom">
<div class="content">
<h3>ID Number</h3>
<div class="form-control-group">
<div class="form-control form-control-number">
<input type="number" id="id_number">
</div>
</div>
<h3>First Name</h3>
<div class="form-control-group">
<div class="form-control form-control-text">
<input type="text" id="first_name">
</div>
</div>
</div><!--.content-->
<section class="data-capture-buttons one-buttons">
<div class="content">
<input type="submit" value="Submit" onClick="javascript:addToCSVFile()">
</div>
</section><!--.data-capture-buttons-->
The Javascript is in the header of the html file and it is:
Javascript 位于 html 文件的标题中，它是：
<script type="text/javascript">
function addToCSVFile() {
var csvData = new Array(); // To collect the names
var csvFilePath = "Data.csv"; // File name
// Collect General Information
csvData[0] = document.getElementById('id_number').value;
csvData[1] = document.getElementById('first_name').value;
var fso = new ActiveXObject('Scripting.FileSystemObject');
var oStream = fso.OpenTextFile(csvFilePath, 8, true, 0);
oStream.WriteLine(csvData.join(','));
oStream.Close();
clearData();
alert("Data Added Successfully");
}
function clearData() {
document.getElementById('id_number').value = "";
document.getElementById('first_name').value = "";
}
</script>
And right now I have the onClick="javascript:addToCSVFile()">but it also doesn't work when I set the form action to the handler.php file and the mothod to post and remove the onlick. This is the php file.
现在我有了，onClick="javascript:addToCSVFile()">但是当我将表单操作设置为 handler.php 文件以及发布和删除 onlick 的方法时，它也不起作用。这是php文件。
<?
if(isset($_POST['match_scouting'])){
$del = "\t";
//Collect Info
$data[1] = $_POST['id_number'];
$data[2] = $_POST['first_name'];
$file = fopen("Data.csv", "a");
$data = "\r\n".implode($del, $data);
fwrite($file, $data);
fclose($file);
echo "The data has been added successfully";
}else{
header("location: form.html");
}
?>
If I am doing this wrong, could you point me in a different direction? What I am ultimately trying to do however is save the form data somehow and I thought this would be easier then setting up an SQL Database since I have never done that before.
如果我做错了，你能指出我不同的方向吗？然而，我最终想要做的是以某种方式保存表单数据，我认为这会比设置 SQL 数据库更容易，因为我以前从未这样做过。
回答by Nicky Smits
For this you do not need to apply any javascript code. Just add an action to your form
为此，您不需要应用任何 javascript 代码。只需向您的表单添加一个操作
<form name="xyz_form" action="proces.php" method="get">
submit will now redirect you to that php file. that php file should contain this:
submit 现在会将您重定向到该 php 文件。该 php 文件应包含以下内容：
<?php
$keys = array('id_number','first_name');
$csv_line = array();
foreach($keys as $key){
array_push($csv_line,'' . $_GET[$key]);
}
$fname = 'file_to_write_to.csv';
$csv_line = implode(',',$csv_line);
if(!file_exists($fname)){$csv_line = "\r\n" . $csv_line;}
$fcon = fopen($fname,'a');
$fcontent = $csv_line;
fwrite($fcon,$csv_line);
fclose($fcon);
?>
$Keysis all the names of the input fields you have, and you can add as many as you'd like. $fnameis the name of the file you want to write to. The csv file gets added new lines when the form is submitted.
$Keys是您拥有的所有输入字段的名称，您可以添加任意数量的名称。$fname是您要写入的文件的名称。提交表单时，csv 文件会添加新行。
You could look after this: Write a text file and force to download with php. If you want to force download the file. You can also look into this for a redirect instead of download: How to make a redirect in PHP?. You could also add:
你可以照顾这个：写一个文本文件并强制使用 php 下载。如果要强制下载文件。您还可以查看重定向而不是下载：How to make a redirect in PHP? . 您还可以添加：
echo file_get_contents($fname);
to your PHP
到你的PHP
