JavaScriptを使用してファイルを保存する方法

JavaScript は、ブラウザーを通じてユーザーと対話するために Web 開発で広く使用されているプログラミング言語です。多くの Web アプリケーションでは、ユーザーは将来のセッションで再度使用できるように、一部のデータをローカル コンピューターに保存する必要があります。 JavaScript は、ファイル保存と呼ばれるメカニズムを使用してこれを行います。この記事では、JavaScript を使用してローカル コンピューターにファイルを保存する方法を学習します。

概要

ファイルの保存とは、ローカル コンピューターのハード ドライブにデータを保存することを指します。これは、JavaScript のファイル保存メカニズムを使用して実現できます。ユーザーが保存ボタンをクリックすると、ユーザー入力またはアプリケーションからのデータを含む新しいファイルがローカル コンピューター上に作成されます。これは、ビデオ プレーヤー、ドキュメント エディター、画像エディターなどの Web アプリケーションで一般的に使用され、ユーザーが編集したファイルをダウンロードして保存できるようにします。

FileSaver.js ライブラリを使用したファイルの保存

FileSaver.js は、ファイルの保存に使用できる一般的なサードパーティの JavaScript ライブラリです。 JavaScript の Blob オブジェクトを使用してデータを含むファイルを作成し、window.location オブジェクトの href プロパティを変更することでそのファイルをユーザーのローカル コンピューターに保存します。

FileSaver.js ライブラリを使用するには、次の 2 つの手順を実行する必要があります。

ステップ 1 - ライブラリをインポートする

次のコードは、JavaScript の使用方法を示しています。 FileSaver.js ライブラリを導入するためのファイル :

<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.2/dist/FileSaver.min.js"></script>

ステップ 2 - ライブラリの saveAs() 関数を使用してファイルを保存します

次のコードは、saveAs() 関数を使用してファイルを保存する方法を示しています。 ) function:

function saveFile() {
  var data = "Hello, World!";
  var filename = "hello.txt";
  var file = new Blob([data], {type: 'text/plain'});
  saveAs(file, filename);
}

この例では、「hello.txt」というファイルを作成し、そこに文字列「Hello, World!」を書き込みます。次に、saveAs() 関数を使用して、Blob オブジェクトとファイル名を渡します。ファイル保存プロセス中に、保存するファイルの場所とファイル名を指定するように求めるファイル保存ダイアログ ボックスが表示されます。

FileReader および Blob オブジェクトを使用したファイルの保存

FileReader および Blob オブジェクトはネイティブ JavaScript API です。 BLOB オブジェクトはバイナリ データを表し、データを含むファイルの作成に使用できます。 FileReader はファイルを読み取って文字列変数を返し、それをユーザーのローカル コンピュータに書き込むことができます。

ステップ 1 - Blob オブジェクトを作成して保存する

次のコードは、Blob オブジェクトを作成してローカル ファイルに保存する方法を示しています。

function saveFile() {
  var data = "Hello, World!";
  var filename = "hello.txt";
  var file = new Blob([data], {type: 'text/plain'});
  var a = document.createElement('a');
  a.href = window.URL.createObjectURL(file);
  a.download = filename;
  a.click();
}

ここでは、 「hello.txt」という名前のファイルを作成し、そこに文字列「Hello, World!」を書き込みます。 window.URL.createObjectURL() メソッドを使用して、Blob オブジェクトを含む URL を作成します。次に、リンクを作成し、ファイルをダウンロードしました。

ステップ 2 - ファイルへのデータの書き込み

次のコードは、入力データを FileReader に書き込む方法を示しています。

function saveFile() {
  var data = "Hello, World!";
  var filename = "hello.txt";
  var file = new Blob([data], {type: 'text/plain'});

  var reader = new FileReader();
  reader.onload = function(event) {
    var text = event.target.result;
    var a = document.createElement('a');
    a.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(text);
    a.download = filename;
    a.click();
  };
  reader.readAsText(file);
}

ここでは、「hello.txt」という名前のファイルを作成します。ファイルを作成し、文字列「Hello, World!」をそこに書き込みます。 FileReader インスタンスの readAsText() メソッドを使用してファイルからテキストを読み取り、成功するとそのテキストを返します。このテキストを使用して、新しいリンクを作成し、ファイルをダウンロードします。

結論

この記事では、JavaScript を使用してローカル コンピューターにファイルを保存する方法について説明しました。 JavaScript ファイル保存メカニズムは、ビデオ プレーヤー、ドキュメント エディター、画像エディターなどの多くの Web アプリケーションで使用できます。 FileSaver.js ライブラリとネイティブ JavaScript API を使用した 2 つの異なる実装をデモンストレーションしました。これらの実装は使いやすく、Web アプリケーションのユーザー エクスペリエンスを向上させます。

以上がJavaScriptを使用してファイルを保存する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。