使用 Javascript 或 VBscript 将本地 Html 表单数据导出到 CSV

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11372723/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 12:57:47  来源:igfitidea点击:

Export a Local Html form data to CSV using Javascript or VBscript

javascripthtmlcsvvbscript

提问by Akash Bajaj

I have created an HTML Form which will be used from a local computer and want the form data to be saved in CSV file.

我创建了一个 HTML 表单,它将在本地计算机上使用,并希望将表单数据保存在 CSV 文件中。

Each time the form is submitted, it should add a line in the CSV file.

每次提交表单时,它都应该在 CSV 文件中添加一行。

This needs to be run locally so cannot use PHP or JSP.

这需要在本地运行,因此不能使用 PHP 或 JSP。

Any help or idea is appreciated.

任何帮助或想法表示赞赏。

回答by Teemu

I assume this is an IE-only question (VBScript). If so, you can use ActiveXObject called FileSystemObject.

我认为这是一个仅限 IE 的问题(VBScript)。如果是这样,您可以使用名为 FileSystemObject 的 ActiveXObject。

JavaScript:

JavaScript:

csv=[]; // Collect form values to this array.

function saveFile(csv){
    var fso,oStream;
    fso=new ActiveXObject('Scripting.FileSystemObject');
    oStream=fso.OpenTextFile('absolute_file_path',8,true);
    oStream.WriteLine(csv.join(','));
    oStream.Close();
    return;
}

function readFile(path){
    var fso,iStream,n,csv=[];
    fso=new ActiveXObject('Scripting.FileSystemObject');
    iStream=fso.OpenTextFile(path,1,true);
    for(n=0;!iStream.AtEndOfStream;n++){
        csv[n]=iStream.ReadLine().split(',');
    }
    iStream.Close();
    return csv;
}

You can read more about FileSystemObject in MSDN.

您可以在MSDN 中阅读有关 FileSystemObject 的更多信息。

回答by Jon Gallup

Old question, but I wanted to update with a good solid response:

老问题,但我想用一个很好的可靠回应来更新:

Another way would be to use an emulator on the machine that will be running the script. This way you could build the form handling script in the same way that you would if it was hosted on a server. Check out WAMP(or MAMPfor Mac), which will create a self contained running instance of Apache with PHP/MySQL on your system. Then you simply place the site's files into the directory either emulator specifies (usually 'www' or 'htdocs') and then you can run it via your browser locally as if it was directly on the server with PHP/MySQL.

另一种方法是在将运行脚本的机器上使用模拟器。通过这种方式,您可以以与托管在服务器上的方式相同的方式构建表单处理脚本。查看WAMP(或Mac 版 MAMP),它将在您的系统上使用 PHP/MySQL 创建一个独立运行的 Apache 实例。然后,您只需将站点的文件放入模拟器指定的目录(通常是“www”或“htdocs”),然后您就可以通过浏览器在本地运行它,就像直接在带有 PHP/MySQL 的服务器上一样。

回答by DavidRR

@Ekkehard.Horner is right in that a browser can't write directly to the local file system.

@Ekkehard.Horner 是对的,因为浏览器不能直接写入本地文件系统。

However, when submitting the form, it is certainly possible to update another part of the browser window provided that your browser is JavaScript enabled. You can then cut-and-paste the accumulated content in your browser to a file if that is your objective.

但是,在提交表单时,如果您的浏览器启用了 JavaScript,当然可以更新浏览器窗口的另一部分。如果这是您的目标,您可以将浏览器中累积的内容剪切并粘贴到文件中。

Here's a simple example I put together that illustrates this concept with just a little JavaScript and a few simple form elements:

这是我放在一起的一个简单示例,它仅用一点 JavaScript 和一些简单的表单元素来说明这个概念:

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Capture Form Fields to CSV</title>
<script type="text/javascript">
<!--
function saveValues() {
    var frm = document.form1;

    var record = ""
            +       frm.text1.value
            + "," + frm.text2.value
            + "," + frm.text3.value
            + "\n";

    frm.textarea1.value += record;
}

function clearText() {
    document.form1.textarea1.value = "";
}
//-->
</script>
</head>
<body>
<h1>Capture Form Fields to CSV</h1>

<form name="form1" action="javascript:null">
  <p>
    F1: <input name="text1" type="text" value="field1" /><br />
    F2: <input name="text2" type="text" value="field2"/><br />
    F3: <input name="text3" type="text" value="field3"/>
  </p>
  <p>
    <input name="save" type="button" value="Save"
           onclick="saveValues(); return false"/>
    &#0160;
    <input name="clear" type="button" value="Clear"
           onclick="clearText(); return false"/>
  </p>
  <p>
    <i>Click 'Save' to add content</i><br />
    <textarea name="textarea1" rows="5" cols="40"></textarea>
  </p>
</form>

</body>
</html>

You can certainly get muchfancier than this if you are willing to dive into DHTML with a JavaScript library such as jQuery. Just consider the fantastic editing mode provided by this very site!

如果您愿意使用 JavaScript 库(如 jQuery)深入研究 DHTML,那么您当然可以得到比这有趣的东西。想想这个网站提供的奇妙的编辑模式吧!