2016/12/27更新

[フロントエンド] 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の脳にすべく、情報をブログに貯めています。気になった方は、本ブログのRSSTwitterをフォローして頂けると幸いです ^ ^。

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





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。