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).
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");
}
}
}
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);
} }
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
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.
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);
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.