Comment télécharger et télécharger des fichiers CSV avec Angular

Les ensembles de données sont extrêmement essentiels pour créer des modèles d'API et divers processus métier. C'est pourquoi l'importation et l'exportation de CSV sont une fonctionnalité souvent nécessaire.

Dans ce tutoriel, vous apprendrez à télécharger et à importer un fichier CSV dans une application angulaire. Nous travaillerons avec un fichier CSV contenant les détails des employés. Le code sera écrit en dactylographie. 

Avant de commencer, vous devrez configurer un nouvel environnement angulaire, créer un nouvel espace de travail avec une application initiale et commencer à servir. Un guide étape par étape pour créer le passe-partout pour votre application angulaire peut être trouvé dans le didacticiel officiel.

Voici la structure du dossier de l'application de la bailli:

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>

1. Créez un modèle simple

Tout d'abord, créons une classe simple pour modéliser l'employé. Ce modèle sera consommé par les composants angulaires.

Le modèle de maintien des détails des employés est donné ci-dessous. Ceci est juste un modèle de base avec le nom, le courrier électronique et la ville de l'employé. 

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

2. Construisez le service

Les applications angulaires ont une structure modulaire. Cela rend l'application robuste et facile à entretenir. L'une des règles principales de toute application angulaire est que les composants ne doivent pas être autorisés à enregistrer ou à récupérer directement les données. C'est pourquoi vous devez utiliser services pour accéder et présenter des données. Dans notre cas d'utilisation, nous avons besoin d'un service pour télécharger et importer des données CSV.

Notre fichier de service est csv.services.ts . 

Une fois le service créé, il peut être injecté dans n'importe quel composant. Avant de faire la fonction qui prendra le contenu d'un fichier sous la forme de a & lt; a & gt; .

Définissez les données: text / csv .

déclenchez automatiquement la balise & lt; entrée & gt; . La balise d'entrée est livrée avec des propriétés comme [accepter] , et type doit être [accepter] qui doit être (modifier) ​​ appellera l'événement $ qui a des propriétés avec les contenus du fichier. text ()

dans le fichier. N'oubliez pas que la méthode de lecture du fichier doit être asynchrone, c'est pourquoi nous utiliserons Async .  Le morceau de code simple pour la lecture du texte à partir d'un fichier CSV est ici:

Une fois que le contenu texte est extrait du fichier CSV, nous pouvons utiliser le service défini à l'étape 2.

private async getTextFromFile(event: any) {<br>    const file: File = event.target.files[0];<br>    let fileContent = await file.text();<br>    <br>    return fileContent;<br>}<br>

Et la fonction ci-dessus peut être liée avec un bouton dans

appantient.html

. Intégration de l'ensemble de l'application

public async importDataFromCSV(event: any) {<br>    let fileContent = await this.getTextFromFile(event);<br>    this.importedData = this._csvService.importDataFromCSV(fileContent);<br>}<br>

Maintenant, il est temps de créer app.module.ts . C'est là que tous les fournisseurs, importations, déclarations et composante bootstrap seront enregistrés. 

<div>Export simple data</div><br><input<br>  #fileUploadSimple<br>  [accept]="'.csv'"<br>  type="file"<br>  class="file-input"<br>  (change)="importDataFromCSV($event)"<br>  hidden="true"<br>/><br><button (click)="fileUploadSimple.click()">Import from csv</button><br><br /><br /><br>

Avec ce changement, vous pourrez voir l'écran suivant.

Demo en direct

Conclusion

Dans ce post, vous avez vu comment télécharger et télécharger des données CSV, et comment ajuster les données CSV CSV dans un fichier de texte. 

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!