ファイルを保存するHTML

サイトの記事でPerlのサンプルを提示することが多くなり、ファイルとして保存できたほうが良いかなと考えました。

このページのソースをご覧ください。 途中の英数字がウネウネ並ぶ所はファイルをbase64エンコードしたものです。 エンコード後に改行はありません。

2019-08-15 解説を追加しました。

inputタグ

inputタグでtype="button"エントリがあるとボタンが表示されます。

valueエントリにボタンに表示する文字を入れますが、フロッピーディスクのアイコン💾は絵文字で💾と書きます。 文字参照のひとつ、数値文字参照を使っています。 xで始めて１６進数で書いていますが、xなしでは１０進数です。

onClickエントリにJavaScriptを書けます。 よくあるのが別の所に書いた関数を呼び出す方法ですね。 onClick="myfunc();"といった書き方です。 関数を呼ぶ事もJavaScriptですけれど、関数の中身をonClickに書けば動きます。 この動作サンプルではファイルに保存するスクリプトを書いています。

リンク先をファイルに保存するスクリプト

var a = document.createElement('a')で、このページにaタグ（リンク）を追加して変数aに入れときます。 a.hrefにリンク先（後述）を設定します。 a.downloadに保存する際のファイル名を設定します。 document.body.appendChild(a)でbodyタグの下に入れます。 すかさずa.click()でリンクをクリックした動作をさせます。 間髪入れずにdocument.body.removeChild(a)でbodyタグから外します。

リンク先を任意のデータにする

URLの代わりに、こんなフォーマットの文字列を用意すると任意のデータになります→'data:<content-type>;[<charset>;][base64,]<base64>'

テキストファイルを保存させたいのでcontent-typeはtext/plainになります。 文字コードはutf-8なので、charset=utf-8になります。 個別のエンコード／エスケープは面倒なので、丸ごとbase64エンコードしますから、base64オプションを追加します。 データ部分はテキストファイルを改行なしでbase64エンコードしたものです。

動作サンプルの場合はこうなります→data:text/plain;charset=utf-8;base64,44Gf44GT44Or44Kr44Gv5L+644Gu5auBDQrjg6vjgqvlp5DjgZXjgpPjgoLkv7rjga7lq4ENCg==

これはデータＵＲＬというものですから、こちらの説明をご覧ください。 データ URL - HTTP | MDN