html - HTML のみを使用してフォームからデータを保存する

Question

フォームを作成し（ユーザーが入力します）、HTMLだけでphpを使用せずにデータをExcelスタイルシートに保存したいのですが、それは可能ですか？

データベースにデータを保存したくありません。

Google doc を使用しようとしましたが、ブラウザーの言語に応じて検証メッセージが生成されるため、あまり良くありません。

score 21 · Accepted Answer

「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

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

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.

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 ファイルに保存し、結果の .txt ファイルを Excel で開き、テキストから列への機能を使用してこれを行いました。

人々が電子メールアドレスを入力するフィールドを収集する 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