CODEWITHSUNDEEP
angularexceltypescriptangularjs-directive
L zakaria
L zakaria

Reputation: 1

Display data from Excel file to Angular

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 assistance in troubleshooting this problem?

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

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>

Upvotes: 0

Views: 68

Answers (0)

Related Questions