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

Question

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

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

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

score 21 · Accepted Answer

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

下面是代码和指向 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>

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

如果您想了解更多详细信息，请随时呼喊。

score 3 · Accepted Answer

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

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

score 1 · Accepted Answer

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

score 0 · Accepted Answer

您可以生成带有下载属性的data:URL ：

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

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

score -1 · Accepted Answer

如果没有 php 或一些高级的 HTML5 本地存储，就无法简单地做你想做的事。

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

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

形式：

<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 的新页面。您只需要服务器上的表单和 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;
?>

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

5 回答 5

Related

Reference