概要

最新の一部ブラウザではローカルのファイルシステムとやりとりできるWebAPIが実装されています。
今回はその一部の機能を使ってボタンを押すとテキストエリアに入力された内容をファイルに保存する機能を作ってみます。

こちらに実際に動かせるものを用意しました。
リンク先の右上にあるOpen in New Tabを押すと触ることができます。

サンプル

例として、次のようなHTMLがあるとします。

<textarea></textarea>
<button>名前を付けて保存する</button>

ボタンを選択してファイル保存のダイアログを開くには showSaveFilePicker 関数を使います。
デフォルトで保存するファイルの名前をあらかじめ表示させるには suggestedName プロパティを使います。

保存するファイルの中身は createWritable 関数を使って生成されるオブジェクトの中に書き込みます。

const button = document.querySelector('button')
const textarea = document.querySelector('textarea')

button.addEventListener('click', async () => {
  const opts = {
    suggestedName: 'example',
    types: [{
      description: 'Text file',
      accept: {'text/plain': ['.txt']},
    }],
  };
  const handle = await window.showSaveFilePicker(opts);
  const writable = await handle.createWritable()
  await writable.write(textarea.value)
  await writable.close()
})