web-dev-qa-db-fra.com

Comment lire un fichier csv sur angular2 ligne par ligne

Je programme une application dans angular2 qui lit un fichier csv simplement en HTML:

<input type='file' name='userFile' id='file' >

Je peux accéder au fichier sur le composant.ts:

ngOnInit() {

   var input = (<HTMLInputElement>document.getElementById("file"));
   input.addEventListener("change", function(event) {
      var files = input.files;
      var len = files.length;

         if (len) {
          console.log("Filename: " + files[0].name);
          console.log("Type: " + files[0].type);
          console.log("Size: " + files[0].size + " bytes");

         }

      }, false);

}

Comment lire cellule par cellule un fichier csv téléchargé avec TypeScript, javascript ou jquery? (et quelle est la meilleure façon de le faire).

javascriptjqueryangulartypescriptcsv
3
user6223678

Voici un exemple d'implémentation angulaire:

@Component({
  selector: 'app-my-file',
  template: `
   <div class="form-group">
        <input type="file" (change)="onFileSelect($event.target)" name="myfile">
   </div>
  `,
  styles: [``]
})
export class YourComponent implements OnInit {

    csvContent: string;

    constructor(){}
    ngOnInit(){
    }

    onFileLoad(fileLoadedEvent) {
            const textFromFileLoaded = fileLoadedEvent.target.result;              
            this.csvContent = textFromFileLoaded;     
            // alert(this.csvContent);
    }

    onFileSelect(input: HTMLInputElement) {

      const files = input.files;
      var content = this.csvContent;    
      if (files && files.length) {
         /*
          console.log("Filename: " + files[0].name);
          console.log("Type: " + files[0].type);
          console.log("Size: " + files[0].size + " bytes");
          */

          const fileToRead = files[0];

          const fileReader = new FileReader();
          fileReader.onload = this.onFileLoad;

          fileReader.readAsText(fileToLoad, "UTF-8");
      }

    }
}

Essayez sur StackBlitz

5
asmmahmud
csv2Array(fileInput: any){
//read file from input
this.fileReaded = fileInput.target.files[0];

let reader: FileReader = new FileReader();
reader.readAsText(this.fileReaded);

reader.onload = (e) => {
  let csv: string = reader.result;
  let allTextLines = csv.split(/\r|\n|\r/);
  let headers = allTextLines[0].split(',');
  let lines = [];

  for (let i = 0; i < allTextLines.length; i++) {
    // split content based on comma
    let data = allTextLines[i].split(',');
    if (data.length === headers.length) {
      let tarr = [];
      for (let j = 0; j < headers.length; j++) {
        tarr.Push(data[j]);
      }

      // log each row to see output 
      console.log(tarr);
      lines.Push(tarr);
    }
  }
  // all rows in the csv file 
  console.log(">>>>>>>>>>>>>>>>>", lines);
} }
3
Mahendra Waykos

En plus de la réponse de asmmahmud , je voudrais ajouter comment vous pouvez analyser le contenu du fichier afin de disposer des lignes et des colonnes dans un tableau (Angular with TypeScript). Ajouter la propriété:

parsedCsv: string[][];

à la classe YourComponent dans son exemple ..__, puis mettez à jour l'événement onFileLoad comme suit:

onFileLoad(fileLoadedEvent): void {
 const csvSeparator = ';';
 const textFromFileLoaded = fileLoadedEvent.target.result;
 this.csvContent = textFromFileLoaded;
 // alert(textFromFileLoaded);

 const txt = textFromFileLoaded;
 const csv = [];
 const lines = txt.split('\n');
 lines.forEach(element => {
   const cols: string[] = element.split(csvSeparator);
   csv.Push(cols);
 });
 this.parsedCsv = csv;
 // console.log(this.parsedCsv);
}

Vous avez maintenant le fichier CSV analysé avec ses lignes et ses colonnes dans le tableau à deux dimensions parsedCsv (la 1ère dimension correspond aux lignes, la 2ème dimension représente la colonne). Vous pouvez remplacer le séparateur si nécessaire - la valeur par défaut est un point-virgule.

Exemple:

Un fichier contenant

ABC 
1; 2 300; 3
4; 5,5; 6

produit la structure de données suivante dans parsedCsv

 ExampleContent

Vous pouvez voir que si votre fichier contient des en-têtes de colonne, les données commencent par l'index de ligne 1, sinon (sans les en-têtes de colonne) avec l'index de ligne 0.

Exemple Stackblitz mis à jour

Note: Sur Stackblitz, j'ai ajouté les quelques lignes suivantes pour que vous puissiez voir comment le tableau est rempli:

  // demo output as alert
  var output: string="";
  csv.forEach(row => {
    output += "\n";
    var colNo = 0;
    row.forEach(col => {
      if (colNo>0) output += " | ";
      output += col;
      colNo++;
    });
  });
  alert(output);
1
Matt

J'ai trouvé un moyen d'extraire le texte:

    var fr = new FileReader();
    fr.onload = function(e) {
      var text = fr.result;
      console.log(text);
    };
    fr.readAsText(files[0]);

Et ensuite, en utilisant des rangées et des cellules séparées en tableaux:

var rows = text.split("\n");
console.log("Row 0 " + rows[0]);
console.log("Row 1 " + rows[1]);
console.log("Row 2 " + rows[2]);
var row1 = rows[0].split(";");
console.log("Value 0,0 " + row1[0]);
console.log("Value 0,1 " + row1[1]);
console.log("Value 0,2 " + row1[2]);

* Ce code ne fonctionne pas bien si les cellules contiennent ";" caractères, ce qui n’est pas le cas de mon application.

0
user6223678