ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript で作成したファイルをサーバーを使用せずにブラウザーに保存するにはどうすればよいですか?

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

Patricia Arquette
リリース: 2024-12-14 04:47:10
オリジナル
195 人が閲覧しました

How Can I Save Files Created with JavaScript in the Browser Without Using a Server?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート