In this article, We learn how to export data to excel in angular. I will show you how, just follow the steps clearly.

For more updates please do Subscribe via Email:

Table Of Contents
  1. Export Excel File
  2. -HTML
  3. – Bootstrap and JQuery
  4. – Route
  5. -TypeScript(TS)
  6. Output
  7. Related Topics

First create a new project in angular just run this command in your CLI.

ng new ProjectName

If this is your first time just refer this article : Link

In my case, Ill name it as exportExcelFile.

this will takes a couple of minutes installing application.

Its means all angular packages is successfully install and your application is ready to run.

To test and run your application just run this command in your CLI.

ng serve

Try to browse this URL : http://localhost:4200/. This is the brand new web page of angular.

Export Excel File

First this we do is to create page where we can export excel file.

Run this command in your CLI. for more info about how to create page or component in angular. refer this link.

ng g c exportExcelFile

Then their is four files created. one for HTML, CSS, and 2 for ts or typescript.

Then install this library package

npm i xlsx --save

-HTML

<div class="container">
    <button class="btn btn-success" (click)="exportexcel() ">Export to Excel</button>

    <table id="excel-table" class="table">
        <tr>
            <th>Id</th>
            <th>Full Name</th>
            <th>Code</th>
            <th>Email</th>
        </tr>
        <tr *ngFor="let item of listOfData">
            <td>{{item.id}}</td>
            <td>{{item.FullName}}</td>
            <td>{{item.Code}}</td>
            <td>{{item.email}}</td>
        </tr>
    </table>
</div>

– Bootstrap and JQuery

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

– Route

<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5125544300826919" crossorigin="anonymous"></script>
<ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-5125544300826919" data-ad-slot="5155152706"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

-TypeScript(TS)

  • Import “excel” extension.
import * as XLSX from 'xlsx';
  • Generate List of sample data.
  generateData()
  {
    var userList = [

      {

      "id": 1,

      "FullName": "Adam Brahams",

      "Code": "Abra",

      "email": "adam@Abra.net"

      },

      {

        "id": 1,

        "FullName": "Queeny Smith",

        "Code": "Ms.Queen",

        "email": "Queen@mail.biz"

      },

      {

        "id": 1,

        "FullName": "James Libra",

        "Code": "JLibra",

        "email": "JLibra@april.biz"

      },

      {

        "id": 1,

        "FullName": "Leanne Graham",

        "Code": "Bret",

        "email": "Graham@april.biz"

      },

      {

        "id": 1,

        "FullName": "Joy Paul",

        "Code": "JPGirl",

        "email": "JPGirl@mail.biz"

      }

      ]

      return userList;
  }
  • Export Excel
 exportexcel()
  {
     /* pass here the table id */
     let element = document.getElementById('excel-table');
     const ws: XLSX.WorkSheet =XLSX.utils.table_to_sheet(element);

     /* generate workbook and add the worksheet */
     const wb: XLSX.WorkBook = XLSX.utils.book_new();
     XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

     /* save to file */
     XLSX.writeFile(wb, "sample.xlsx");
  }

Output

Happy Learning..

GitHub Link: https://github.com/JaveTLupango/exportExcelFile

Thank you for visiting my blog site. Hoping you learn more here. please feel free to comment and suggest if there is need to enhance and update. thank you.

Related Topics

By: Jave LupangoPosted on Categories : Categories : Tags:

Leave a Reply

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