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>

  1. もっと直接的にファイルを作成してみましょう。
    実行するとダウンロードフォルダに 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>
  2. ファイルを出力する処理を関数として定義してみました。
    file が作成するファイル名で ary が書き出すデータです。
    同一のファイル名が存在するときは、ダウンロードと同様に (1) などが付けられます。
    <html>
<head>
<meta charset=utf-8>
<title>Text Put</title>
<script>
function txt_put(file, ary)
{ var blob = new Blob([ary],{type:"text/plan"});
  var link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = file;
  link.click();
}
</script>
</head>

<body>
<script>
    var dat= new Array("0123456789\n", "ABCDEFG\n", "abcdefg\n", "text_put Test Data\n");
    window.onload=(txt_put("test.txt", dat));
</script>

</body>
</html>
  3. HTML5 から使えるようになった File API ですが ローカル環境, サーバー環境, ブラウザによっては動かないかも知れません。
    2020/09/11 Windows10 & Edge で実行を確認しました。

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