仅使用 HTML 存储表单中的数据

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

store data from a form using just HTML

htmlexcel

提问by Julie

I want to create a form (will be filled by users) and store the data in excel stylesheet without using php just HTML ,is that possible?

我想创建一个表单(将由用户填写)并将数据存储在 excel 样式表中,而不使用 php 只是 HTML,这可能吗?

I dont want to store data an a database.

我不想将数据存储在数据库中。

I have tried to use google doc but it's not that good because the validation messages are generated depending on the browser language.

我曾尝试使用 google doc,但效果不佳,因为验证消息是根据浏览器语言生成的。

采纳答案by Diodeus - James MacFarlane

No, HTML pages cannot write files. You need a server to do this.

不,HTML 页面不能写入文件。您需要一台服务器来执行此操作。

The best you can do is generate CSV data in a textarea that the user could then copy and paste to a local file, then load that into Excel.

您能做的最好的事情是在文本区域中生成 CSV 数据,然后用户可以将其复制并粘贴到本地文件中,然后将其加载到 Excel 中。

回答by Mitch

The unqualified response of "You can't write a file from HTML" is inaccurate. While you may need to add some "hidden" fields in your HTML (in order to simplify the exporting of only the data requested and not the questions or other text) it is ABSOLUTELYpossible to do this. I've done JUST THAT in the code below - and all I use is JavaScript. No Server required, No Database required, No PHP required.

“You can't write a file from HTML”的不合格回答是不准确的。虽然您可能需要在 HTML 中添加一些“隐藏”字段(为了简化仅导出请求的数据而不是问题或其他文本),但绝对可以这样做。我已经在下面的代码中做到了这一点 - 我使用的只是 JavaScript。不需要服务器,不需要数据库,不需要 PHP。

Below is the code and a link to the JSFiddle page where you can see it in action:

下面是代码和指向 JSFiddle 页面的链接,您可以在其中看到它的运行情况:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function fillHidTable(){
    var htqf; //-- hidden field
    var rf; //-- retrieved field
    for ( var i = 1; i < 5; i++ ) {
        rf = "htqf"+i;
        document.getElementById(rf).innerHTML = document.getElementById("Q"+i+"CALC").value;
    }
    tableToExcel('hidTable', 'Analysis Results');
}

var tableToExcel = (function() {
    var uri = 'data:application/vnd.ms-excel;base64,'
            , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
            , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
            , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
    return function(table, name) {
        if (!table.nodeType) table = document.getElementById(table)
        var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
        window.location.href = uri + base64(format(template, ctx))
    }
})()
</script>

<title>HTML Form Data to Excel</title>

<style type="text/css" media="screen">
    .divCenMid{font-family:Arial,sans-serif;font-size:14pt;font-style:normal;font-weight:700;text-align:center;vertical-align:middle;margin:0;}
    .allbdrCenMid{border:.75pt solid windowtext;color:#000;font-family:Arial,sans-serif;font-size:10pt;font-style:normal;font-weight:400;text-align:center;vertical-align:middle;margin:0;}
    .allbdrCenTop{border:.75pt solid windowtext;color:#000;font-family:Arial,sans-serif;font-size:10pt;font-style:normal;font-weight:400;text-align:center;vertical-align:top;margin:0;}
    .allbdrLtMid{border:.75pt solid windowtext;color:#000;font-family:Arial,sans-serif;font-size:10pt;font-style:normal;font-weight:400;text-align:left;vertical-align:middle;margin:0;}
    .allbdrLtTop{border:.75pt solid windowtext;color:#000;font-family:Arial,sans-serif;font-size:10pt;font-style:normal;font-weight:400;text-align:left;vertical-align:top;margin:0;}

</style>

</head>

<body>

<table width= "565px" cellspacing="0" cellpadding="0" style="border-spacing:0;" id="QMSTable">
    <col width="25px"/>
    <col width="120px"/>
    <col width="360px"/>
    <col width="60px"/>
    <tr>
        <td class="divCenMid" colspan = "4"> QMS Assessment</td>
    </tr>
    <tr>
        <td class="allbdrCenMid"> No</td>
        <td class="allbdrCenMid"> Criteria</td>
        <td class="allbdrLtMid"> Question</td>
        <td class="allbdrCenMid"> Score</td>
    </tr>
    <tr>
        <td class="allbdrCenTop"> Q1</td>
        <td class="allbdrLtTop"> Quality Unit Independency</td>
        <td class="allbdrLtTop"> Do you have the Quality Unit?</td>
        <td class="allbdrCenMid">
            <input id="Q1CALC" type="text" value="" class="nobdrCenMid" style="overflow:hidden; width:93% " name="Q1CALC"/>
        </td>
    </tr>
    <tr>
        <td class="allbdrCenTop"> Q2</td>
        <td class="allbdrLtTop"> Apply PICS GMP</td>
        <td class="allbdrLtTop"> Which GMP regulation do you use?</td>
        <td class="allbdrCenMid">
            <input id="Q2CALC" type="text" value="" class="nobdrCenMid" style="overflow:hidden; width:93% " name="Q2CALC"/>
        </td>
    </tr>
    <tr>
        <td class="allbdrCenTop"> Q3</td>
        <td class="allbdrLtTop"> Deviation or Non-conformance</td>
        <td class="allbdrLtTop"> Do you have a deviation or non-conformance procedure?</td>
        <td class="allbdrCenMid">
            <input id="Q3CALC" type="text" value="" class="nobdrCenMid" style="overflow:hidden; width:93% " name="Q3CALC"/>
        </td>
    </tr>
    <tr>
        <td class="allbdrCenTop"> Q4</td>
        <td class="allbdrLtTop"> Complaint</td>
        <td class="allbdrLtTop"> Do you have a customer complaint procedure?</td>
        <td class="allbdrCenMid">
            <input id="Q4CALC" type="text" value="" class="nobdrCenMid" style="overflow:hidden; width:93% " name="Q4CALC"/>
        </td>
    </tr>
</table>

<div id="hidTable" style="display: none">
    <table id="testTable">
        <caption>Supplier Risk Analysis</caption>
        <colgroup></colgroup>
        <colgroup></colgroup>
        <colgroup></colgroup>
        <thead>
        <tr>
            <th>No.</th>
            <th>Question</th>
            <th>Score</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Q1</td>
            <td>Do you have the Quality Unit?</td>
            <td id="htqf1">-</td>
        </tr>
        <tr>
            <td>Q2</td>
            <td>Apply PICS GMP?</td>
            <td id="htqf2">-</td>
        </tr>
        <tr>
            <td>Q3</td>
            <td>Do you have a deviation or non-conformance procedure?</td>
            <td id="htqf3">-</td>
        </tr>
        <tr>
            <td>Q4</td>
            <td>Do you have a customer complaint procedure?</td>
            <td id="htqf4">-</td>
        </tr>
        </tbody>
    </table>
</div>

<input type="button" onclick="fillHidTable()" value="Export Data to Excel">
</body>
</html>

Here is the JSFiddle link: https://jsfiddle.net/MitchinThailand/LV9vr/

这是 JSFiddle 链接:https://jsfiddle.net/MitchinThailand/LV9vr/

if you want more details feel free to holler.

如果您想了解更多详情,请随时大喊大叫。

回答by user2161214

As it is not possible to save html form data to a file using javascript because of some security reason so for my solution i just use the TCPDF for this.

由于某些安全原因,无法使用 javascript 将 html 表单数据保存到文件中,因此对于我的解决方案,我只使用 TCPDF。

回答by Kornel

You can generate a data:URL with the downloadattribute:

您可以data:使用下载属性生成一个URL :

<a download="test.csv" href="data:text/csv,foo,bar,baz">

You'll need to use JavaScript to build such URL from form data and insert/update appropriate link in the document.

您需要使用 JavaScript 从表单数据构建此类 URL,并在文档中插入/更新适当的链接。

回答by KLDavenport

To do what you want to do simply it will not be possible without php or some advanced HTML5 local storage.

如果没有 php 或一些高级 HTML5 本地存储,就不可能做你想做的事情。

I've done this by using simple PHP script to have form data get saved to a .txt file and then open the resulting .txt file in Excel and use the text to columns feature.

我通过使用简单的 PHP 脚本将表单数据保存到 .txt 文件,然后在 Excel 中打开生成的 .txt 文件并使用文本到列功能来完成此操作。

I have a HTML form which collects a field where people enter their email address. I want the form to post the email address to a text file. Please help! Will award maximum points to the one who will answer me correctly! 2 years ago Report Abuse Additional Details Please paste entire code to do this! 2 years ago

我有一个 HTML 表单,它收集人们输入他们的电子邮件地址的字段。我希望表单将电子邮件地址发布到文本文件中。请帮忙!将最高分奖励给正确回答我的人!2 年前 报告滥用 其他详细信息 请粘贴完整代码以执行此操作!2年前

Form:

形式:

<form method="post" action="nameofyourscripthere.php">
Name: <input type="text" name="name" id="name" />

Email: <input type="text" name="email" id="email" />

<input type="submit" name="submit" value="Send Form" />
</form>

PHP:

PHP:

Create a new page saved as .php with this code. All you need is the form and the PHP script on the server for this to work :)

使用此代码创建一个另存为 .php 的新页面。您只需要服务器上的表单和 PHP 脚本即可使其工作:)

<?php
// Get the name they entered in the form
// We'll be naming the file this
$file = $_POST['name'];
// Get the email from the form
$email = $_POST['email'];
// We want the file to be a text file right?
$ex = ".txt";
// Try to open a file named $file$ex (johndoe.txt for example)
// Because this file doesn't exist yet the server creates it
$write = fopen("$file$ex","w");
// Now open the file up again but this time save the email in it
fwrite($write,$email);
// MAKE SURE you close the file!!!
fclose($write);
// The folder that this script is in on the server is where the file we just made was saved
// We can 'rename' it to another folder
// The folder on the server we want to move it to 
$data = "../emails/";
// Now put it all together: This example goes out of the folder we're in and into the folder 'emails'
// The new 'name' would be this now (../emails/johndoe.txt): So now the file is moved to where we want for storage
rename ("$file","$data$file$ex");
// The script is done, send the user to another page (Just read the address below and you'll get it)
// Its just an example fyi change to what you want
header('Location: http://YourWebsiteNameHere.com/contactFo…
exit;
?>