[フロントエンド] Webページで編集した内容をJavascriptから動的にダウンロードする

こんにちは、@yoheiMuneです。
今日はWebページで色々と編集した内容について、Javascriptを用いてその内容を動的にダウンロードする方法をブログに書きたいと思います。

目次

デモ

こんな感じです。以下のテキストエリア内に書いた内容について、ボタンを押すとテキストファイルとしてダウンロードすることができます。


テキストファイルとしてダウンロードする

Javascriptから動的にダウンロードする実装方法

上記の実装は以下のように行うことができます。

HTML

<textarea id="content"></textarea><br>
<button id="download">テキストファイルとしてダウンロードする</button>

Javascript

// クリック時の動作を指定する
var btn = document.getElementById('download');
btn.addEventListener('click', function() {

    // テキストエリアから入力内容を取得する
    var content = document.getElementById('content').value;

    // テキストファイルをBlob形式に変換する
    let blob = new Blob([content]);

    // Blobデータに対するURLを発行する
    let blobURL = window.URL.createObjectURL(blob);

    // URLをaタグに設定する
    let a = document.createElement('a');
    a.href = blobURL;

    // download属性でダウンロード時のファイル名を指定
    a.download = 'content.txt';

    // Firefoxの場合は、実際にDOMに追加しておく必要がある
    document.body.appendChild(a);

    // CLickしてダウンロード
    a.click();

    // 終わったら不要なので要素を削除
    a.parentNode.removeChild(a);
});

と、こんな感じに実装することができます。ポイントとしてはコンテンツデータをBlob形式にして、ObjectURLを作成して、それをaタグ経由で利用します。その際にaタグのdownload属性を指定することで、画面に表示するのではなくダウンロード挙動としています。

最後に

Javascriptで動的にファイルを生成してダウンロードできるのは嬉しいですね。これを応用すれば例えばCanvasで描いた内容のダウンロードとか、編集したJSONファイルのダウンロードとか色々とできそうです。

最後になりますが本ブログでは、フロントエンド・Go言語・Node.js・Python・Linux・開発関連・Swift・Java・機械学習など雑多に情報発信をしていきます。自分の第2の脳にすべく、情報をブログに貯めています。気になった方は、本ブログのRSSやTwitterをフォローして頂けると幸いです ^ ^。

最後までご覧頂きましてありがとうございました！