はじめに
今回は, JavaScript で動的に入力した内容のファイルをダウンロードする方法を紹介します.
ファイルのダウンロード機能は, サーバーを用意しないとできないと思われがちですが, a タグの download 属性を使えばクライアントサイド完結でファイルを生成しダウンロードすることができます.
サンプルプログラム
テキストエリアに適当な文字列を入力して, 入力した内容を保存 ボタンをクリックしてみてください.
入力した内容を持った sample.txt というファイルがダウンロードされます.
コード
index.html
<body>
<h1>${title}</h1>
<p>${description}</p>
<div>
<textarea id='$input' rows='8' cols='64'>hoge foo bar</textarea>
</div>
<a id='$btn' class='btn' download='sample.txt'>入力した内容を保存</a>
<script>${script}</script>
</body>
main.js
window.onload = function() {
// ダウンロードボタンを押した際のイベントを登録
$btn.onclick = () => {
// blob オブジェクトを生成
var content = $input.value;
var blob = new Blob([content], { type: 'text/plain' });
// download の href に object url を設定
$btn.href = window.URL.createObjectURL(blob);
};
};
解説
download する際のファイル名を指定する
まずダウンロードボタン用の a タグの download 属性に, ファイル名を指定します.
<a id='$btn' class='btn' download='sample.txt'>入力した内容を保存</a>
これでダウンロードした際のファイル名を指定できます.
今回は sample.txt としました.
入力した内容を href にセットしよう
ダウンロードされるファイルの内容は a タグの href 属性で決まります.
download ボタンをクリックしたら, 動的に入力された値から blob オブジェクトを生成し, それを url に変換して href に代入します.
// ダウンロードボタンを押した際のイベントを登録
$btn.onclick = () => {
// blob オブジェクトを生成
var content = $input.value;
var blob = new Blob([content], { type: 'text/plain' });
// download の href に object url を設定
$btn.href = window.URL.createObjectURL(blob);
};
これでダウンロードボタンを押したタイミングで, 動的にテキストエリア内容を反映したファイルを生成しダウンロードできるようになります.
おわりに
管理ツールで csv 出力する際になんかでよく使っている tips です.
参考になれば幸いです.
応用すれば, HTML5 Canvas で描いた内容を画像として出力したりといったこともできるので
近々紹介できたらと思います.
Discussion