JavaScript で作成したファイルをサーバーを使用せずにブラウザーに保存するにはどうすればよいですか?

HTML5/JavaScript を使用したファイルの作成と保存

Web ブラウザでのファイルの作成と保存は、特に動的ファイルを扱う場合によく行われるタスクです。コンテンツ。このプロセスにサーバーを関与させることは可能ですが、サーバーの役割が最小限の場合は非効率となる可能性があります。この質問では、純粋な JavaScript を使用して、サーバーを介さずに Web ブラウザーでのファイル保存を容易にする可能性を検討します。

課題: JavaScript でのファイルの保存

ユーザーはCollada ファイル (詳細な 3D モデル形式) をより管理しやすい JSON 形式に解析するスクリプトを開発しました。解析されたファイルはメモリに保存されます。ユーザーは、サーバーを介さずに変換されたファイルをダウンロードする方法を提供したいと考えています。

解決策: HTML5 BLOB とダウンロード属性

解決策は HTML5 Blob 属性と Download 属性にあります。 Blob オブジェクトを使用すると、メモリ内にファイルのようなオブジェクトを作成できます。一方、 タグの Download 属性を使用すると、ファイル名を指定してダウンロードを開始できます。

プロセスを示すコード スニペットは次のとおりです。 :

function download(filename, text) {
    var blob = new Blob([text], {type: 'text/plain'});
    var pom = document.createElement('a');
    pom.setAttribute('href', URL.createObjectURL(blob));
    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!');

これにより、ユーザーのコンピュータに「Hello world!」というテキストが含まれた「test.txt」という名前のファイルが作成されます。

互換性:

ダウンロード機能は、Blob 属性と Download 属性をサポートする最新のブラウザーで動作します。これには以下が含まれます:

• Chrome
• Firefox
• Safari
• Edge
• Opera

以上がJavaScript で作成したファイルをサーバーを使用せずにブラウザーに保存するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。