Angulaire - Lire un fichier et analyser son contenu

Question

J'ai un contrôle de téléchargement de fichier qui contient le fichier sélectionné comme ci-dessous,

 <div class="Block">
  <label id="lbl">File </label>
  <input #fileInput type='file'/>
</div>
 

J'ai un bouton soumettre comme ci-dessous,

 <button type="button" class="btn btn-primary" 
     (click)="uploadDocument()">Upload File</button>
 

Lorsque je sélectionne un fichier et que je clique sur le bouton de téléchargement, le fichier a besoin du contenu à l'intérieur du fichier sans l'envoyer au serveur et en y lisant.

Remarque: Le type de fichier sera csv

Answer 1

Vous pouvez utiliser FileReader en javascript pour réaliser ce que ses un csv le fichier

Ajouter un fichier d'événement de changement de stocker le fichier dans un objet en tant que ci-dessous,

<div class="Block">
  <label id="lbl">Code </label>
  <input type='file' (change)="fileChanged($event)">

</div>

La fonction doit définir le fichier à un objet qui est utilisé plus tard

file:any;
fileChanged(e) {
    this.file = e.target.files[0];
}

Lorsque le bouton envoyer est cliqué, vous pouvez utiliser l' readAsText() méthode de FileReader en javascript pour obtenir le contenu ci-dessous,

uploadDocument(file) {
    let fileReader = new FileReader();
    fileReader.onload = (e) => {
      console.log(fileReader.result);
    }
    fileReader.readAsText(this.file);
}

Remarque: onload événement sera déclenché après que le contenu est lu jusqu'à votre logique doit être à l'intérieur de l' onLoad fonction.

Answer 2

vous extrayez le fichier de l'entrée et utilisez l'API FileReader

 readFile(file: File) {
    var reader = new FileReader();
    reader.onload = () => {
        console.log(reader.result);
    };
    reader.readAsText(file);
}
 

Answer 3

Pour ceux qui demandent comment obtenir les données de chaîne après l' avoir lu, les données sont en result propriété de fileReader . Vérifiez l'exemple de code ci-dessous.

     let fileString:any= "";

    uploadDocument(file) {
        let fileReader = new FileReader();
        fileReader.onloadend = (e) => {
           //console.log(myReader.result);
           // Entire file
           console.log(myReader.result);

           // By lines
           var lines = myReader.result.split('\n');
           for(var line = 0; line < lines.length; line++){
               console.log(lines[line]);
           }

           this.fileString = myReader.result;
        };

        fileReader.readAsText(this.file);
    }