JavaScript で CSV ファイルを作成してダウンロードするにはどうすればよいですか?

#JavaScript には、さまざまなデータを操作し、さまざまな形式のファイルを処理する強力な機能があります。開発者は、JavaScript を使用して Web アプリケーションを開発する際に、CSV ファイルを使用してデータを処理する必要がある場合があります。

たとえば、私たちはユーザーが製品を売買できる電子商取引プラットフォームを構築しています。さらに、ユーザーが時間範囲に基づいて注文の詳細を CSV ファイルにダウンロードできるようにしたいと考えています。この場合、データと CSV ファイルを操作する必要があります。別の例としては、オンライン バンキング Web サイトでは取引詳細を CSV ファイルでダウンロードできます。

このチュートリアルでは、JavaScript または JSON オブジェクト形式で指定されたデータに基づいて csv ファイルを作成し、そのファイルをダウンロードする方法を学習します。

＃＃＃文法＃＃＃

ユーザーは、次の構文に従って、指定されたデータから CSV ファイルを作成およびダウンロードできます。

リーリー

上記の構文では、「csvData」は CSV ファイルの行にデータを追加する配列です。その後、アンカータグを使用して csvData から CSV ファイルを作成し、アンカー要素をクリックしてファイルをダウンロードします。

＃＃＃例＃＃＃

次の例では、最初に「laptops」という名前のオブジェクトの配列を作成します。配列の各オブジェクトには、ブランド、プロセッサー、価格、RAM のプロパティが含まれています。

downloadFile() 関数では、カンマ区切りのオブジェクト キーを「csvData」変数に追加します。その後、指定されたオブジェクトの配列をループし、各属性値を同じ順序で連結して 1 行を準備します (コンマで区切って「CSVData」変数に追加します)。

次に、createElement() メソッドを使用してアンカー要素を作成し、encodeURI() メソッドを使用してエンコードした後、href 属性の値として「csvData」を追加します。さらに、目標値とダウンロード属性値を設定します。最後に、アンカー要素をクリックして CSV ファイルをダウンロードします。

出力で、ユーザーはボタンをクリックしてデータを CSV ファイルにダウンロードできます。

リーリー ＃＃＃例＃＃＃

以下の例では、API からデータを取得し、JSON データを使用して CSV ファイルを作成します。 HTML セクションにボタンを作成し、ユーザーがボタンをクリックすると、downloadFile() 関数が実行されて JSON データが取得され、CSV ファイルにダウンロードされます。

プログラマは次の手順に従ってサンプル コードを理解できます -

ステップ 1

- fetch() API を使用して API URL からデータを取得します。

ステップ 2

- その後、res.json() メソッドを使用して応答を JSON オブジェクトに変換します。

ステップ 3

- then() ブロックで、csvData[] 配列を初期化して CSV ファイルの行を保存します。

ステップ 4

- 応答から最初のオブジェクトを取得し、それを引数として Object.keys() メソッドに渡し、配列内のすべてのキーを取得します。その後、join() メソッドを使用してキーをカンマで区切られた単一の文字列に連結し、csvData 配列にプッシュします。

ステップ 5

- 応答で取得したすべてのオブジェクトをループします。ループでは、'heads' 配列を指定した map() メソッドを使用して、'heads' 配列要素 (オブジェクト キー) に基づいて現在のオブジェクトから値を取得し、その値を 'rowValues' 配列にマップします。

ステップ 6

- 次に、join() メソッドを使用して、「rowValues」配列のすべての要素を結合し、「csvData」配列にプッシュします。

ステップ 7

- 「

」区切り文字を使用して「csvData」配列のすべての要素を連結し、それを getCSVFile() 関数パラメーターとして渡します。

ステップ 8 - getCSVFile() 関数で、アンカー要素の新しいインスタンスを作成します。その後、エンコードされた csvData を「href」属性値に設定し、「target」および「download」属性値を設定します。

ステップ 9

- アンカー要素をクリックしてファイルをダウンロードします。

リーリー どちらのサンプル コードにも 2 つの主要な部分が含まれています。最初の部分では、指定されたデータを操作し、それらをカンマ区切りの文字列で連結します。これを CSV ファイル データに使用します。次の部分は、ファイルにデータを追加し、ファイルをダウンロードすることです。 CSV ファイルを作成するには、アンカー要素のダミー インスタンスを使用します。

以上がJavaScript で CSV ファイルを作成してダウンロードするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。