JavaScriptを使用してファイルを保存する方法-フロントエンドQ&A-php.cn

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

WBOY

リリース： 2023-05-12 13:29:07

オリジナル

2503 人が閲覧しました

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