1. ホーム
  2. ジャバスクリプト

[解決済み】HTML5/JavaScriptでファイルを生成して保存する方法

2022-03-25 13:44:34

質問

最近WebGLをいじっていて、Colladaリーダーを使えるようになりました。問題は、それがかなり遅いということです(Colladaは非常に冗長なフォーマットです)。私はすでにJavaScriptでファイルをパースするコードを持っているので、私のエクスポーターとしてそれを使うこともできるかもしれません。問題は保存です。

さて、ファイルを解析してその結果をサーバーに送信し、ブラウザがサーバーからファイルをダウンロードするように要求することができるのは分かっています。しかし、実際には、サーバーはこの特定の処理には何の関係もありません。では、なぜサーバーを関与させるのでしょうか?私はすでに目的のファイルの内容をメモリ上に持っている。純粋なJavaScriptを使って、ユーザーにダウンロードを提示する方法はないでしょうか?(私はそれを疑うが、同様に尋ねるかもしれない...)

そして、はっきりさせておきたいのは、ユーザーの知らないところでファイルシステムにアクセスしようとしているのではない、ということです。ユーザーはファイルを提供し(おそらくドラッグ&ドロップで)、スクリプトはメモリ内でファイルを変換し、ユーザーは結果をダウンロードするように促されます。これらはすべて、ブラウザに関する限り、安全な動作であるべきです。

[EDIT】です。] しかし、私がやっていることの一部は、純粋なHTML5で何ができるかを強調する試みです...ですから、私の場合、Flashはまさに除外されています。(とはいえ、本当のウェブアプリをやっている人には完全に有効な答えです。) そうなると、サーバーを巻き込みたくなければ、私は運が悪いようです。とにかくありがとうございます。

どのように解決するのですか?

MatthewとDennksterがそのオプションを指摘してくれたおかげで、data:URIを作成することは間違いなく私のためのトリックになります。以下は、基本的な方法です。

1) すべてのコンテンツを "content" という文字列に取得します (たとえば、最初にそこに作成するか、すでに構築されたページのタグの innerHTML を読み取ることによって)。

2) データURIを構築する。

uriContent = "data:application/octet-stream," + encodeURIComponent(content);

ブラウザの種類などによって長さの制限はありますが、例えばFirefox 3.6.12では最低でも256kまで動作します。encodeURIComponentを使わずにBase64でエンコードした方が効率的かもしれませんが、私にとってはそれでOKでした。

3) 新しいウィンドウを開き、このURIにリダイレクトしてください。

newWindow = window.open(uriContent, 'neuesDokument');

以上です。