JavaScriptだけでファイルの保存機能を実装する

スポンサーリンク

こんばんは。ファガイです。本日はJavaScriptだけでブラウザのある情報のデータを保存する機能の実装方法について書こうと思います。

概要

ローカル上だけでファイルの保存ができるようになる方法になります。
自分が作っているMarkdown-F Editorはその機能を使って保存を実装しています。

今回利用する機能はHTML5の機能なので、ブラウザによっては実装されていない可能性がありますので、注意。

確認ブラウザ

  • IE11
  • Firefox
  • GoogleChrome

にて確認を取ってます。IEに関しては独自関数を使っているため、前のブラウザでは対応されていない可能性があります。

ソースコード

ソース自体は結構簡単です。

var text = "テキストデータ";

var blob = new Blob([text], {type: "text/plain"}); // バイナリデータを作ります。

// IEか他ブラウザかの判定
if(window.navigator.msSaveBlob)
{
    // IEなら独自関数を使います。
    window.navigator.msSaveBlob(blob, "ファイル名.txt");
} else {
    // それ以外はaタグを利用してイベントを発火させます
    var a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.target = '_blank';
    a.download = 'ファイル名.txt';
    a.click();
}

また、IE以外の場合はcreateObjectURLを使用しているので出来るだけ使用後に

URL.revokeObjectURL();

を実行してオブジェクトURLをメモリから開放させるのが良いです。

ではではー。

コメント

タイトルとURLをコピーしました