It seems that my application is unable to retrieve data from the Excel file as expected. Despite implementing the necessary logic, the data retrieval process is not functioning as intended.
I’ve thoroughly reviewed the code and configuration, but unfortunately, I haven’t been able to identify the root cause of the issue.
Could you please provide some guidance or assistance in troubleshooting this problem? Any insights or suggestions you can offer would be greatly appreciated.
This is my app.component.ts:
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import * as XLSX from 'xlsx'; // Importez la bibliothèque XLSX
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
imports: [CommonModule],
template: `<div *ngIf="visible">Hi</div>`,
standalone: true // Ajoutez standalone: true pour indiquer que le composant est autonome
})
export class AppComponent {
DonnesExcel: any;
constructor() { }
ReadExcel(event: any) {
let file = event.target.files[0];
let fileReader = new FileReader();
fileReader.onload = (e) => {
const data = fileReader.result; // Accédez à la propriété result via FileReader
const workBook = XLSX.read(data, { type: 'binary' });
const sheetNames = workBook.SheetNames;
this.DonnesExcel = XLSX.utils.sheet_to_json(workBook.Sheets[sheetNames[0]]);
console.log("Données Excel :", this.DonnesExcel); // Afficher les données dans la console
};
fileReader.readAsBinaryString(file);
}
}
And this is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tableau HTML CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input type="file" (change)="ReadExcel($event)">
<table>
<thead>
<tr>
<th>ID</th>
<th>Nom</th>
<th>Prénom</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let data of DonnesExcel">
<tr>
<th scope="row">{{data.id}}</th>
<td>{{data.nom}}</td>
<td>{{data.prenom}}</td>
<td>{{data.note}}</td>
</tr>
</ng-container>
</tbody>
</table>
<script src="script.js"></script>
</body>
</html>
New contributor
L zakaria is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.