javascript - 名前を付けてJavascriptのテキストエリアからファイルを保存するには?

Question

重複の可能性:
HTML5/Javascript を使用してファイルを生成および保存する

この問題を解決するためにクライアント側の HTML/JS ソリューションが必要です。ユーザーが編集可能なテキストエリア A、テキストフィールド B、ボタン C があります。ユーザーが C をクリックすると、B.value に等しい名前のファイルがダウンロードされ、内容は A.value と同じです。これを見ましたが、ファイル名の設定方法が指定されておらず、このような Flash ソリューションは必要ありません。ユーザーは最新の Chrome ブラウザーを使用していると想定できます (これは私のチームにとっては小さなツールです)。

Answer 1

「ユーザーが最新の Chrome ブラウザーを使用していると想定できる」ため、この種のことは<a>、属性downloadとhrefを作成してからクリックすることで実行できます。以下のコード例。

var Download = {
    click : function(node) {
        var ev = document.createEvent("MouseEvents");
        ev.initMouseEvent("click", true, false, self, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        return node.dispatchEvent(ev);
    },
    encode : function(data) {
            return 'data:application/octet-stream;base64,' + btoa( data );
    },
    link : function(data, name){
        var a = document.createElement('a');
        a.download = name || self.location.pathname.slice(self.location.pathname.lastIndexOf('/')+1);
        a.href = data || self.location.href;
        return a;
    }
};
Download.save = function(data, name){
    this.click(
        this.link(
            this.encode( data ),
            name
        )
    );
};

Download.save('hello world', 'my_file.txt');