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 属性をサポートする最新のブラウザーで動作します。これには以下が含まれます:
以上がJavaScript で作成したファイルをサーバーを使用せずにブラウザーに保存するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。