How to read the excel file in angular with XSLX package

Here we add example code for fetching data from excel.

https://youtu.be/lD0D_cqBw74

Add XLSX package to the angular project

npm install xlsx –save

read excel data in angular

Download demo Excel

app.component.ts

uploadExcel(e) {
  
  try{
  
  const fileName = e.target.files[0].name;
  
  import('xlsx').then(xlsx => {
    let workBook = null;
    let jsonData = null;
    const reader = new FileReader();
    // const file = ev.target.files[0];
    reader.onload = (event) => {
      const data = reader.result;
      workBook = xlsx.read(data, { type: 'binary' });
      jsonData = workBook.SheetNames.reduce((initial, name) => {
        const sheet = workBook.Sheets[name];
        initial[name] = xlsx.utils.sheet_to_json(sheet);
        return initial;
      }, {});
      this.products = jsonData[Object.keys(jsonData)[0]];
      console.log(this.products);

    };
    reader.readAsBinaryString(e.target.files[0]);
  });

}catch(e){
   console.log('error', e);
}

}

app.component.html

 <input type="file" (change)="uploadExcel($event)">

  <table >
    <thead>
      <tr>
        <th>#</th>
        <th>Product Identity</th>
        <th>Product Name</th>
        <th>Product Price</th>
        <th>Seller Name</th>
        <th>Total Count</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let product of products; let i = index">
      <td>{{i+1}}</td>
        <td>{{product.identity}}</td>
        <td>{{product.name}}</td>
        <td>{{product.price}}</td>
        <td>{{product.sellerName}}</td>
        <td>{{product.count}}</td>
        <td>{{product.status}}</td>
      </tr>
    </tbody>
  </table> 

app.component.css

table{
  width:75%;
  margin:20px auto;
}
table tr td, table tr{
  border-collapse: collapse;
  border:1px solid #ccc;
  font-size:14px;
}

I hope this will help. If any queries feel free to comment below.