Write Text File

ローカル環境で Text File を作成します。
このページの作成に当たっては HTML5 File API : write を参考にさせていただきました。

  1. HTML5 から File API が使えるようになり、ローカルのファイルをブラウザ上で直接、取り扱えるようになりました。
    ブラウザが File API に対応しているかを調べます。
    Text File HTML5
    <script type="text/javascript">
        if (window.File)
        {   window.alert("File APIが実装されてます。"); }
        else
        {   window.alert("本ブラウザではFile APIが使えません");
        }
    </script>
    
  2. 結果としてローカルファイルが作られるのですが、形式的にはダウンロードとして保存されます。
    従って、保存ファイルのエンコーディングは UTF-8 のみで、保存先はダウンロードフォルダになります。
    Text File Write(write_text.html)
    上のリンクをクリックして起動して下さい。
    テキストをタイプして download をクリックするとダウンロードフォルダに output.txt が作成されます。
  3. write_text.html のソースコードです。
    <!DOCTYPE html>
    <html>
    <head>
        <title>File-API Write Sample</title>
        <meta charset="UTF-8">
        <script>
            function doDownload() {
                var textdata = document.getElementById( "dspArea"  ).value;
                var filename = document.getElementById( "filename" ).value;
                var blob = new Blob( [ textdata ], { "type" : "text/plain" } );
                if ( window.navigator.msSaveBlob ) { // IE
                    window.navigator.msSaveBlob( blob, filename );
                } else {
                    var a = document.createElement( "a" );
                    a.download = filename;
                    a.href     = window.URL.createObjectURL( blob );
                    var div = document.getElementById( "controls" );
                    div.appendChild( a );
                    a.click();
                    div.removeChild( a );
                }
            }
        </script>
    </head>
    <body>
        <div id="controls">
            <input type="text" id="filename" value="output.txt" />
            <input type="button" value="download" onclick="doDownload()" />
        </div>
        <div id="contents">
            <textarea id="dspArea" rows="10" cols="30"></textarea>
        </div>
    </body>
    </html>
    
  4. もっと直接的にファイルを作成してみましょう。
    実行するとダウンロードフォルダに test.txt が作成されます。
    <!DOCTYPE html>
    <html>
    <head>
    <title>File-API Write Sample</title>
    <meta charset="UTF-8">
    </head>
    
    <body>
    <script>
    let blob = new Blob(['あいうえお\n', '01234567\n', 'abcdefg\n', 'ABDEFG\n'],{type:"text/plan"});
    let link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'test.txt';
    link.click();
    </script>
    
    </body>
    </html>
    
  5. HTML5 から使えるようになった File API ですが ローカル環境, サーバー環境, ブラウザによっては動かないかも知れません。
    2020/09/11 Windows10 & Edge で実行を確認しました。

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)