Angularを使用してCSVファイルをアップロードおよびダウンロードする方法

データセットは、APIモデルとさまざまなビジネスプロセスの構築において非常に不可欠です。これが、CSVのインポートとエクスポートが頻繁に必要な機能である理由です。

このチュートリアルでは、Angularアプリ内でCSVファイルをダウンロードしてインポートする方法を学びます。従業員の詳細を含むCSVファイルを使用します。コードはTypeScriptで記述されます。 

開始する前に、新しい角度環境をセットアップし、最初のアプリケーションを備えた新しいワークスペースを作成し、サービングを開始する必要があります。 Angularアプリ用のボイラープレートを作成するための段階的なガイドは、公式チュートリアルにあります。

これが、ボイラープレートアプリケーションのフォルダー構造です。シンプルなモデルを作成

Root<br>-- src<br>---- app<br>------ app-routing.module.ts<br>------ app.component.css<br>------ app.component.html<br>------ app.component.ts<br>------ app.module.ts<br>---- models<br>---- services<br>------ csv.services.ts<br>---- index.html<br>---- main.ts<br>---- styles.css<br>

まず、従業員をモデル化するためのシンプルなクラスを作成しましょう。このモデルは、角度コンポーネントによって消費されます。

従業員の詳細を保持するためのモデルを以下に示します。これは、従業員の名前、電子メール、および都市を備えた基本モデルです。 

2。サービスを構築します

export class User {<br>  name: string;<br>  email: string;<br>  city: string;<br>}<br>

Angularアプリケーションには、モジュラー構造があります。これにより、アプリケーションが堅牢でメンテナンスが容易になります。 Angularアプリケーションの主要なルールの1つは、コンポーネントを直接保存または取得することを許可してはならないことです。そのため、データにアクセスして提示するには、

サービスを使用する必要があります。ユースケースでは、CSVデータをダウンロードおよびインポートするためのサービスが必要です。

サービスファイルはcsv.services.tsです。 

サービスが作成されたら、任意のコンポーネントに注入できます。ファイルの内容をa＆lt; a＆gt;。

データを設定する関数を作成する前に、データを設定します：text/csv

。入力タグには、[Accept] のようなプロパティが付属しています。は、が必要です。ファイルからtext（）。ファイルを読み取る方法は非同期である必要があります。そのため、async

を使用します。  CSVファイルからテキストを読み取るためのコードの簡単な部分はこちらにあります： テキストコンテンツがCSVファイルから抽出されたら、ステップ2で定義されたサービスを使用できます。アプリケーション全体を統合今度は、app.module.tsを構築する時が来ました。これは、すべてのプロバイダー、輸入、宣言、およびブートストラップコンポーネントが登録される場所です。  この変更により、次の画面を見ることができます。

live demo

codepenのddev（@divyaddev）によるペンJavascriptの無限のスクロールを参照してください。 

以上がAngularを使用してCSVファイルをアップロードおよびダウンロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。