How to read the excel file in angular with XSLX package

Here we add example code for fetching data from excel.

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.

3 thoughts on “How to read the excel file in angular with XSLX package”

  1. Can I get a full code because I am new in this technology and I am working on this please send me the full code for reference.

Leave a Reply

Your email address will not be published. Required fields are marked *