HTML5/JavaScriptを使用してファイルを生成して保存する 質問する

HTML5/JavaScriptを使用してファイルを生成して保存する 質問する

最近 WebGL をいじっていて、Collada リーダーが動作するようになりました。問題は、かなり遅いことです (Collada は非常に冗長な形式です)。そのため、ファイルをより使いやすい形式 (おそらく JSON) に変換することにします。JavaScript でファイルを解析するコードは既にあるので、それをエクスポーターとしても使用できます。問題は保存です。

これで、ファイルを解析し、その結果をサーバーに送信し、ブラウザーにサーバーからファイルをダウンロードとして要求させることができることがわかりました。しかし、実際にはサーバーはこの特定のプロセスには何の関係もありません。では、なぜサーバーを関与させるのでしょうか。必要なファイルの内容はすでにメモリにあります。純粋な JavaScript を使用してユーザーにダウンロードを提示する方法はありますか? (疑わしいですが、聞いてみる価値はあるでしょう...)

明確に言うと、ユーザーの知らないうちにファイルシステムにアクセスしようとしているわけではありません。ユーザーはファイルを提供し (おそらくドラッグ アンド ドロップで)、スクリプトはメモリ内でファイルを変換し、その結果をダウンロードするようにユーザーに促します。これらはすべて、ブラウザーに関する限り「安全な」アクティビティであるはずです。

[編集]:最初に言及しなかったため、「Flash」と回答した投稿者は十分に有効ですが、私が行っていることの一部は、純粋な HTML5 で何ができるかを強調する試みです... そのため、私の場合は Flash は除外されます。(ただし、「本物の」Web アプリを作成する人にとっては完全に有効な回答です。) そうであれば、サーバーを関与させたくない限り、運が悪いようです。 とにかく、ありがとうございます!

ベストアンサー1

HTML5 対応ブラウザ向けのシンプルなソリューション...

function download(filename, text) {
    var pom = document.createElement('a');
    pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    pom.setAttribute('download', filename);

    if (document.createEvent) {
        var event = document.createEvent('MouseEvents');
        event.initEvent('click', true, true);
        pom.dispatchEvent(event);
    }
    else {
        pom.click();
    }
}

使用法

download('test.txt', 'Hello world!');

おすすめ記事