HTMLからCSV形式のファイルを出力（書き掛け）
2021-1-21 - 読み終える時間: 5 分

なんでこうヘタクソなのか(；′⌒`)

  • formでinputした値をCSVというかカンマ区切りでテキストファイルに出力する

コード全文（書き掛け）

<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="HTMLからCSV形式のファイルを出力">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSV Generator</title>
        <style type="text/css">
            @charset "UTF-8";
            nav {
                color: ghostwhite;
                background-color: #eb5f07;
                font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, Osaka, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
                padding: 2em;
            }
            body {
                margin: 0rem;
                padding: 0rem;
                -webkit-text-size-adjust: 100%;
            }
            dt {
                color: #f39c12;
                margin-top: 4pt;
            }
            #main {
                padding-left: 12pt;
            }
            #id_mask {
                background: rgba(120, 120, 120, 0.4);
                position: fixed;
                top: 0;
                bottom: 0;
                right: 0;
                left: 0;
                z-index: 1;
            }
            #id_modal {
                background: #fff;
                color: #555;
                width: 300px;
                padding: 40px;
                border-radius: 4px;
                position: absolute;
                top: 40px;
                left: 0;
                right: 0;
                margin: 0 auto;
                z-index: 2;
            }
            #id_mask.hide {
                display: none;
            }
            #id_modal.hide {
                transform: translate(0, -1000px);
            }
        </style>
        <script type="text/javascript">
            function dispmodal() {
                const modal = document.getElementById('id_modal');
                const mask = document.getElementById('id_mask');
                modal.classList.remove('hide');
                mask.classList.remove('hide');
                mask.addEventListener('click', function () {
                    modal.classList.add('hide'); 
                    mask.classList.add('hide');
                });
            }
            function dl_file() {
                var val_hostname = document.forms.csv_data.id_hostname.value;
                var val_servername = document.forms.csv_data.id_servername.value;
                var val_apptag = document.forms.csv_data.id_apptag.value;
                var data_1l = "p0,p1,p2,p3,p4,p5";
                var data_2l = val_hostname + "," + val_servername + "," + val_apptag;
                var data_concat = data_1l + "\n" + data_2l;
                let data_obj = new Blob([data_concat], {type: 'text/plain'});
                save = document.createElement("a");
                save.href = window.URL.createObjectURL(data_obj);
                save.download = "csv_" + val_hostname + ".text";
                save.click();
            }
        </script>
    </head>
    <body>
        <div id="head">
            <header>
                <nav>CSV Generator</nav>
            </header>
        </div>
        <div id="main">
            <section name="input-area">
                <form id="csv_data">
                    <dl>
                        <dt>ホスト名</dt>
                        <dd><input name="hostname" id="id_hostname" type="text" maxlength="32" minlength="3" inputmode="text" placeholder=" host-name" pattern="[a-z0-9\-]*"></dd>
                        <dt>サーバ和名</dt>
                        <dd><input name="servername" id="id_servername" type="text" maxlength="64" inputmode="text" placeholder=" 日本語サーバー名" size="64"></dd>
                        <dt>APPタグ</dt>
                        <dd>addrle.info<input name="apptag" id="id_apptag" hidden value="addrle.info"></dd>
                    </dl>
                </form>
                <button id="btn_obj" onclick="dispmodal()">chk</button>
            </section>
            <section id="id_modal" class="hide">
                <table>
                    <tr>
                        <td id="td_hostname"><span id="out_hostname"></span></td>
                        <td id="td_servername"><span id="out_servername"></span></td>
                        <td id="td_apptag"><span id="out_apptag"></span></td>
                    </tr>
                </table>
                <a href="javascript:dl_file()" id="save_file">ファイル保存</a>
            </section>
        </div>
        <div id="id_mask" class="hide"></div>
    </body>
</html>

注意点

Windowsで動かす想定なのでcharsetはShift_JIS

UTF-8にしておくのが良さそう

今日はここまで

Search

ALTERWORKS Labo について

まだ特筆すべきものはありません《以下広告》







TagList